知道一个好的CSS技术的全屏背景图像？ [英] know of a good CSS-technique for a full-screen background image?
问题描述
我在网上看过，尝试了各种方法来解决这个问题，但没有找到一种适用于我的技术。我想我的网站的背景图像居中，填充整个浏览器屏幕，并使用响应式设计。
i've look around online and tried various ways to go about this, but haven't managed to find one technique that works for me. i'd like my website's background image to be centered, fill the entire browser screen, and work with responsive design.
有一个简单的技术，除了CSS3 / background-size：cover？
is there an easy technique, besides the CSS3/background-size: cover? that just didn't work at ALL for me (not sure why...).
推荐答案
如果你不反对除了CSS之外，还可以使用 img 标签模拟 background-size：cover 行为。
If you're not opposed to a solution involving HTML in addition to CSS, you can simulate the background-size: cover behavior with an img tag.
HTML：
<body>
<div id="image-matte">
<img src="..."/>
</div>
... Page content below ...
</body>
CSS：
#image-matte {
position: fixed;
top: 0%;
left: -50%;
width: 200%;
height: 200%;
}
#image-matte img {
display: block;
margin: auto;
min-height: 50%;
min-width: 50%;
}
/* Covers the image to prevent pointer interaction */
#image-matte:after {
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
编辑背景图片，您需要在wrapper div和保存图片本身的内部div之间创建一个表/表格单元格关系... HTML和CSS将如下所示：
To get a vertically AND horizontally centered background image, you'll need to create a table/table-cell relationship between the wrapper div, and an inner div that holds the image itself... The HTML and CSS would look like this:
HTML：
<div id="image-matte">
<div>
<img src="..."/>
</div>
</div>
CSS：
#image-matte {
position: fixed;
display: table;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
text-align: center;
}
#image-matte div {
vertical-align: middle;
display: table-cell;
}
#image-matte img {
position: relative;
text-align: center;
min-height: 50%;
min-width: 50%;
}
/* Covers the image to prevent pointer interaction */
#image-matte:after {
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
工作范例： http://jsfiddle.net/qkpvb/
这篇关于知道一个好的CSS技术的全屏背景图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
