Html 背景图像可以超出 div 的边界吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4056410/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can background image extend beyond div's borders?
提问by Yarin
Can background image extend beyond div's borders? Does overflow: visible apply to this?
背景图像可以超出 div 的边界吗？溢出：可见是否适用于此？
采纳答案by Guffa
No, a background can't go beyond the edge of an element.
不，背景不能超出元素的边缘。
The overflowstyle controls how the element reacts when the content is larger than the specified size of the element.
的overflow风格控制如何元素反应时的含量大于所述元件的指定的尺寸。
However, a floating element inside the divcan extent outside the div, and that element could have a background. The usefulness of that is limited, though, as IE7 and earlier has a bug that causes the divto grow instead of letting the floating element show outside it.
但是，divdiv内部的浮动元素可以扩展到 div 之外，并且该元素可以具有背景。但是，它的用处是有限的，因为 IE7 及更早版本有一个错误，该错误会导致div增长而不是让浮动元素显示在其外部。
回答by Yarin
Following up on kijin's advice, I'd like to share my solution for image offsets:
按照kijin的建议，我想分享我的图像偏移解决方案：
/**
* Only effective cross-browser method to offset image out of bounds of container AFAIK,
* is to set as background image on div and apply matching margin/padding offsets:
*/
#logo {
margin:-50px auto 0 auto;
padding:50px 0 0 0;
width:200px;
height:200px;
background:url(../images/logo.png) no-repeat;
}
I used this example on a simple div element <div id="logo"></div>to position my logo with a -50pxvertical offset. (Note that the combined margin/padding settings ensure you don't run into collapsing margin issues.)
我在一个简单的 div 元素上使用了这个示例<div id="logo"></div>，以-50px垂直偏移定位我的徽标。（请注意，组合边距/填充设置可确保您不会遇到崩溃边距问题。）
回答by fahd4007
not possible to set a background image 'outside' it's element,
无法在其元素的“外部”设置背景图像，
BUT YOU CAN DOwhat you want with using 'PSEUDO'element and make that whatever size you want and position it wherever you want.
see here :
i have set the arrow outside the span
但是您可以使用“伪”元素来做您想做的事情，并根据您的需要制作任何尺寸并将其放置在您想要的任何位置。在这里看到：我已经将箭头设置在跨度之外
here is the code
这是代码
HTML :
HTML :
<div class="tooltip">
<input class="cf_inputbox required" maxlength="150" size="30" title id="text_13" name="name" type="text"><span class="msg">dasdasda</span>
</div>
strong text
强文本
.tooltip{position:relative; float:left;}
.tooltip .msg {font-size:12px;
background-color:#fff9ea;
border:2px #e1ca82 solid;
border-radius:5px;
background-position:left;
position:absolute;
padding:4px 5px 4px 10px;
top:0%; left:104%;
z-index:9000; position:absolute; max-width:250px;clear:both;
min-width:150px;}
.tooltip .msg:before {
background:url(tool_tip.png);
background-repeat:no-repeat;
content: " ";
display: block;
height: 20px;
position: absolute;
left:-10px; top:1px;
width: 20px;
z-index: -1;
}
see here example: http://jsfiddle.net/568Zy/11/
见这里的例子：http: //jsfiddle.net/568Zy/11/
回答by kijin
No, the background won't extend beyond the borders. But you can stretch the border as far as you want using paddingand some clever tweaking of negative margins & position.
不，背景不会超出边界。但是您可以根据需要尽可能地拉伸边框，padding并对负边距和位置进行一些巧妙的调整。
回答by SleBluue
I understand this is really really late, and I am not even sure if this is best practice but I found a little way to do this with my footer. My last section had a background image that I wanted to overflow into the footer and I fixed it with a few lines of CSS. Also added a little padding the section with the background image.
我知道这真的很晚了，我什至不确定这是否是最佳实践，但我找到了一种用我的页脚做到这一点的方法。我的最后一部分有一个背景图像，我想将它溢出到页脚中，我用几行 CSS 修复了它。还添加了一些填充背景图像的部分。
footer{
background-color: transparent!important;
top: -50px;
margin-bottom: -50px;
}
回答by Brad Mace
I tried using negative values for background-positionbut it didn't work (in firefox at least). There's not really any reason for it to. Just set the background image on one of the elements higher up in the hierarchy.
我尝试使用负值，background-position但它不起作用（至少在 Firefox 中）。真的没有任何理由这样做。只需在层次结构中较高的元素之一上设置背景图像。
回答by ?ime Vidas
After a little bit of research: No and No :)
经过一点研究：不和不:)
