html背景大小会超过div吗,关于CSS：背景图片是否可以大于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的padding设置为正数，将margin设置为负数

#wrapper {

background: url(xxx.jpeg);

padding-left: 10px;

margin-left: -10px;

}

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

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

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

祝好运...

我更喜欢这种方法，因为它不会干扰#wrapper元素的位置(例如，如果您需要以margin: 0 auto;为中心)

不，你不能。

但作为可靠的解决方法，我建议将第一个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上设置新的背景图像。当然，这将取决于您的布局，但是您无需使用页脚。

这可能会有所帮助。

它要求页脚高度为固定数字。基本上，您在页脚div中有一个div，其内容为普通内容，为position: absolute，然后为图像，其position: relative为负z-index，因此它保持在"所有"之下，且值为top负页脚的高度减去图片高度(在我的示例中为50px - 600px = -550px)。在Chrome 8，FireFox 3.6和IE 9中进行了测试。

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

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

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

.home-hero__img{

position:relative;

top:-10px;

transform: scale(1.1);

background: {

size: contain;

image: url('image.svg');

}

}