背景图片可以大于div本身吗？

我有一个100％宽度的页脚div。高约50像素，具体取决于其内容。

是否可以为#footer提供背景图像，从而使该div溢出？

该图像约为800x600px，我希望将其放置在页脚的左下角。它的工作方式应该类似于我网站的背景图片，但是我已经在自己的身体上设置了背景图片。我需要在我的网站的左下角放置另一个图片，并且#footer div十分适合。

#footer {
    clear: both;
    width: 100%;
    margin: 0;
    padding: 30px 0 0;
    background:#eee url(images/bodybgbottomleft.png) no-repeat left bottom fixed;
}

图像设置为页脚，但是不会溢出div。有可能做到这一点吗？

overflow:visible 没有做这份工作！

我不认为您可以使背景图片溢出其div。放置在“图像”标签中的图像可能会溢出其父div，但是背景图像受到作为背景的div的限制。

有一个很简单的把戏。将该div的padding设置为正数，并将其负数设置为negativ

#wrapper {
     background: url(xxx.jpeg);
     padding-left: 10px;
     margin-left: -10px;
}

您可以使用css3伪元素（:before和/或:after），如本文所示

https://www.exratione.com/2011/09/how-to-overflow-a-background-image-using-css3/

祝好运...

不，你不能。

但是，作为一个可靠的解决方法，我建议将第一个div分类为position:relative并用于div::before创建包含图像的基础元素。分类，因为position:absolute您可以将其移动到相对于初始div的任意位置。

不要忘了向新元素添加内容。这是一些例子：

div {
  position: relative;
}    

div::before {
  content: ""; /* empty but necessary */
  position: absolute;
  background: ...
}

注意：如果您希望它位于父div的“顶部”，请div::after改用。

使用背景尺寸的封面对我有用。

#footer {
    background-color: #eee;
    background-image: url(images/bodybgbottomleft.png);
    background-repeat: no-repeat;
    background-size: cover;
    clear: both;
    width: 100%;
    margin: 0;
    padding: 30px 0 0;
}

显然要注意支持问题，请检查“我可以使用”：http : //caniuse.com/#search=background-size

您提到在上已经有背景图片body。

您可以将背景图片设置为，html将新背景图片设置为body。当然，这取决于您的布局，但是您无需使用页脚。

使用trasform：scale（1.1）属性使bg图像更大，并通过position：relative将其向上移动；顶部：-10px；

<div class="home-hero">
    <div class="home-hero__img"></div>
</div>

.home-hero__img{
 position:relative;
    top:-10px;
    transform: scale(1.1);
    background: {
        size: contain;
        image: url('image.svg');
    }
}

并非如此-背景图像受其所应用元素的限制，并且溢出属性仅适用于该元素内的内容（即标记）。

您可以将另一个div添加到页脚div中，然后将背景图像应用于该div中，并产生溢出。

这可能会有所帮助。它要求页脚高度为固定数字。基本上，您会在页脚div中有一个div，其中包含div的常规内容，其中包含position: absolute，然后是的图像position: relative，带有负值，z-index因此它始终位于所有内容之下，并且top页脚高度的负值减去图像高度（在我的示例中，50px - 600px = -550px）。在Chrome 8，FireFox 3.6和IE 9中进行了测试。