背景图像可以延伸到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

无法在其外部设置背景图像,

但是你可以使用'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;
        }

看这里的例子:http://jsfiddle.net/568Zy/11/

Answer 4

不,背景不会超出边界.但是你可以根据需要拉伸边框,padding并巧妙地调整负边距和位置.