背景图像可以延伸到div边界之外吗？

Question

背景图片可以延伸到div的边框之外吗？溢出：可见是否适用于此？

Answer 1

不，背景不能超出元素的边缘。

overflow样式控制当内容大于元素的指定大小时元素的反应。

但是，div内的浮动元素可以扩展到div之外，并且该元素可以具有背景。但是，它的用处是有限的，因为IE7及更早版本有一个错误导致div增长而不是让浮动元素显示在它之外。

Answer 2

按照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垂直偏移量定位我的徽标。 （请注意，组合边距/填充设置可确保您不会遇到崩溃边距问题。）

Answer 3

不，背景不会延伸到边界之外。但是你可以使用padding尽可能地扩展边框，并对负边距进行一些巧妙的调整。位置。

Answer 4

无法在外面设置背景图片＆＃39;它的元素，

但您可以使用＆＃39; PSEUDO＆＃39; 元素，并根据需要制作任何尺寸，并将其放置在您想要的任何位置。 看这里 ： 我把箭头设置在跨度之外

这是代码

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;
        }

请参见此示例：http://jsfiddle.net/568Zy/11/

Answer 5

我知道这真的很晚了，我甚至不确定这是不是最好的做法，但是我找到了一个用我的页脚做这个的方法。我的上一部分有一个背景图片，我想要溢出到页脚，我用几行CSS修复它。还添加了一些填充背景图像的部分。

footer{
 background-color: transparent!important;
 top: -50px;
 margin-bottom: -50px;
}

Answer 6

我尝试使用background-position的负值，但它不起作用（至少在Firefox中）。它没有任何理由。只需在层次结构中较高的一个元素上设置背景图像。

Answer 7

经过一些研究：不，不：）