背景图像可以扩展到DIV的边界之外吗?

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

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

但是,在 div 可以扩展到DIV之外,并且该元素可以有背景。不过,这种方法的实用性是有限的,因为IE7和更早的版本有一个导致 div 增长而不是让浮动元素显示在其外部。

跟进 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 垂直偏移。(请注意,合并的页边距/填充设置可确保不会遇到折叠的页边距问题。)

不,背景不会超出边界。但是你可以用 padding 以及对负利润和位置的巧妙调整。

无法将背景图像设置为“外部”元素,

但是你可以 你想用什么 '伪' 元素,使其成为您想要的任何大小,并将其放置在您想要的任何位置。 请参见此处: 我把箭放在桥外了

这是密码

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/

我知道这真的很晚了,我甚至不确定这是否是最佳实践,但我发现了一个小方法来做我的脚。我的最后一部分有一个背景图像,我想溢出到页脚中,并用几行CSS将其修复。还添加了一点背景图像填充部分。

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

我尝试使用负值 background-position 但它不起作用(至少在火狐中)。这真的没有任何理由。只需在层次结构中较高的元素之一上设置背景图像。

经过一点研究:不和不:)