背景图像能比 div 本身大吗？

我有一个100% 宽度的页脚 div，它大约50px 高，这取决于它的内容。

有没有可能为 # footer 提供一个背景图像，使其溢出这个 div？

图像大约是800x600px，我希望它定位在页脚的左下角。它应该像我的网站的背景图片一样工作，但我已经在我的身体上设置了一个背景图片。我需要另一个图像定位在我的网站左下角和 # 页脚 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不起作用！

157663 次浏览
小开
最佳答案

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.

小开

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.

小开

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-index so it stays "below" everything, and a negative top value 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.

小开

You mention already having a background image on body.

You could set 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.

小开

There is a very easy trick. Set padding of that div to a positive number and margin to negative

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

You can use a css3 psuedo element (:before and/or :after) as shown in this article

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

Good Luck...

小开

No, you can't.

But as a solid workaround, I would suggest to classify that first div as position:relative and use div::before to create an underlying element containing your image. Classified as position:absolute you can move it anywhere relative to your initial 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::after instead.

小开

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

小开

Use trasform: scale(1.1) property to make bg image bigger, move it up with position: relative; top: -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');
}
}

提交答案