CSS 背景图像可以大于 div 本身吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4280886/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can a background image be larger than the div itself?
提问by matt
I have a footer div with 100% width. It's about 50px high, depending on its content.
我有一个 100% 宽度的页脚 div。它大约 50px 高，取决于它的内容。
Is it possible to give that #footer a background image that kind of overflows this div?
是否可以给 #footer 一个溢出这个 div 的背景图像？
The image is about 800x600px, and I want it to be positioned in the left bottom corner of the footer. It should work sort of like a background image for my website, but I've already set a background image on my body. I need another image positioned at the bottom left corner of my website and the #footer div would be perfect for that.
图像大约为 800x600 像素，我希望它位于页脚的左下角。它应该像我网站的背景图片一样工作，但我已经在我的身体上设置了背景图片。我需要另一个位于我网站左下角的图像，#footer div 非常适合。
#footer {
clear: both;
width: 100%;
margin: 0;
padding: 30px 0 0;
background:#eee url(images/bodybgbottomleft.png) no-repeat left bottom fixed;
}
The image is set to the footer, however it doesn't overflow the div. Is it possible to make that happen?
图像设置为页脚，但它不会溢出 div。有没有可能做到这一点？
overflow:visibledoesn't do the job!
overflow:visible不工作！
采纳答案by Daniel Bingham
I do not believe that you can make a background image overflow its div. Images placed in Image tags can overflow their parent div, but background images are limited by the div for which they are the background.
我不相信您可以使背景图像溢出其 div。放置在 Image 标签中的图像可以溢出其父 div，但背景图像受它们作为背景的 div 的限制。
回答by transGLUKator
There is a very easy trick. Set padding of that div to a positive number and margin to negativ
有一个非常简单的技巧。将该 div 的填充设置为正数并将边距设置为负数
#wrapper {
background: url(xxx.jpeg);
padding-left: 10px;
margin-left: -10px;
}
回答by Josh Sells
You can use a css3 psuedo element (:beforeand/or :after) as shown in this article
您可以使用 css3 伪元素（:before和/或:after），如本文所示
https://www.exratione.com/2011/09/how-to-overflow-a-background-image-using-css3/
https://www.exratione.com/2011/09/how-to-overflow-a-background-image-using-css3/
Good Luck...
祝你好运...
回答by ArcTanH
No, you can't.
不，你不能。
But as a solid workaround, I would suggest to classify that first div as position:relativeand use div::beforeto create an underlying element containing your image. Classified as position:absoluteyou can move it anywhere relative to your initial div.
但作为一个可靠的解决方法，我建议将第一个 div 分类为position:relative并用于div::before创建包含图像的底层元素。分类为position:absolute您可以将其移动到相对于初始 div 的任何位置。
Don't forget to add content to that new element. Here's some example:
不要忘记向该新元素添加内容。下面是一些例子：
div {
position: relative;
}
div::before {
content: ""; /* empty but necessary */
position: absolute;
background: ...
}
Note: if you want it to be 'on top' of the parent div, use div::afterinstead.
注意：如果您希望它位于父 div 的“顶部”，请div::after改用。
回答by PanPipes
Using background-size cover worked for me.
使用背景大小的封面对我有用。
#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;
}
Obviously be aware of support issues, check Can I Use: http://caniuse.com/#search=background-size
显然要注意支持问题，请检查我可以使用：http: //caniuse.com/#search=background-size
回答by stephenhay
You mention already having a background image on body.
你提到已经有一个背景图片body。
You couldset that background image on html, and the new one on body. This will of course depend upon your layout, but you wouldn't need to use your footer for it.
您可以将该背景图像设置为html，并将新的图像设置为body。这当然取决于您的布局，但您不需要为此使用页脚。
回答by hollsk
Not really - the background image is bounded by the element it's applied to, and the overflow properties only apply to the content (i.e. markup) within an element.
不是真的 - 背景图像受其应用的元素限制，并且溢出属性仅适用于元素内的内容（即标记）。
You can add another div into your footer div and apply the background image to that, though, and have that overflow instead.
不过，您可以在页脚 div 中添加另一个 div 并将背景图像应用到该 div 中，然后让其溢出。
回答by cambraca
This could help.
It requires the footer height to be a fixed number. Basically, you have a div inside the footer div with it's normal content, with position: absolute, and then the image with position: relative, a negative z-indexso it stays "below" everything, and a negative topvalue of the footer's height minus the image height (in my example, 50px - 600px = -550px). Tested in Chrome 8, FireFox 3.6 and IE 9.
这可能会有所帮助。它要求页脚高度是一个固定的数字。基本上，您在页脚 div 内有一个 div，它是正常内容，带有position: absolute，然后是带有position: relative负的图像，z-index因此它保持“低于”所有内容，以及top页脚高度减去图像高度的负值（在我的示例中，50px - 600px = -550px）。在 Chrome 8、FireFox 3.6 和 IE 9 中测试。
回答by Pavlo Kozachuk
Use trasform: scale(1.1) property to make bg image bigger, move it up with position: relative; top: -10px;
使用 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');
}
}
