【发布时间】：2011-05-02 16:01:39
【问题描述】：
背景图片可以超出 div 的边界吗？溢出：可见是否适用于此？
【问题讨论】：
【发布时间】：2011-05-02 16:01:39
【问题描述】：
经过一点研究：No and No :)
【讨论】：
-
谢谢 - 给了 Guffa 的答案，因为他提供了更多细节
不，背景不能超出元素的边缘。
overflow 样式控制当内容大于元素的指定大小时元素的反应。
但是，div 内的浮动元素可以延伸到 div 之外，并且该元素可以有背景。但是，它的用处是有限的，因为 IE7 和更早版本有一个错误会导致 div 增长而不是让浮动元素显示在它之外。
【讨论】：
我尝试对background-position 使用负值，但它不起作用（至少在 Firefox 中）。真的没有任何理由这样做。只需在层次结构中较高的元素之一上设置背景图像。
【讨论】：
-
负背景位置值用于精灵图像，因此实际上依赖于背景不显示在元素之外。 :)
不，背景不会超出边界。但是您可以使用padding 以及对负边距和位置的一些巧妙调整来将边框拉伸到任意距离。
【讨论】：
根据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;
}
我在一个简单的 div 元素 <div id="logo"></div> 上使用了这个示例，以使用 -50px 垂直偏移来定位我的徽标。 （请注意，组合的边距/填充设置可确保您不会遇到边距折叠问题。）
【讨论】：
-
内边距应该是正数，而不是负数。负填充无效，因此样式将被忽略。
-
这个很好用（用IE7、IE8、IE9、Firefox、Safari、Chrome测试），谢谢！
-
我倾向于注意到与负填充和边距的细微浏览器/设备/操作系统不一致，所以我开始避免它。它在某些情况下有效，例如，当我尝试内联无序列表的位置列表项时，我通常会看到一个问题。
-
这是一个很好的解决方案。也适用于百分比。如果要向子元素添加内容，可以将其设置为 50%（变为屏幕的 100%）。
无法将背景图像设置在其元素的“外部”，
但你可以使用 'PSEUDO' 元素做任何你想做的事，并将其制作成你想要的任何大小，并将其放置在你想要的任何位置。 看这里 ： 我已将箭头设置在跨度之外
这里是代码
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>
强文本
.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;
}
【讨论】：
我知道这真的很晚了，我什至不确定这是否是最佳做法，但我找到了一种使用页脚执行此操作的小方法。我的最后一部分有一个背景图像，我想溢出到页脚中，我用几行 CSS 修复它。还添加了一点背景图片填充部分。
footer{
background-color: transparent!important;
top: -50px;
margin-bottom: -50px;
}
【讨论】：
-
是的，这非常适合在 Y 轴上重叠事物