CSS 拉伸背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14226330/
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
CSS Stretched Background Image
提问by JR Galia
I have a large image to be use as a background-imageof a page. What I want is that the height of the image will be stretched to fill the height of the page. It should be centered also.
我有一个大图像用作background-image页面的一个。我想要的是图像的高度将被拉伸以填充页面的高度。它也应该居中。
background: black url("/image/background.jpg") no-repeat fixed center;
回答by Kelvin
background-size: coverwill do the trick in modern browsers - see mozilla's documentationfor more details.
background-size: cover将在现代浏览器中发挥作用 -有关更多详细信息，请参阅 mozilla 的文档。
For older browsers (particularly older versions of IE), I've had a lot of success with jQuery plugins like this oneto emulate the behaviour.
对于较旧的浏览器（尤其是较旧版本的 IE），我使用像这样的jQuery 插件来模拟行为取得了很大的成功。
回答by foundry
here is a good writeup
这是一篇很好的文章
http://css-tricks.com/perfect-full-page-background-image/
http://css-tricks.com/perfect-full-page-background-image/
the gist of it being
它的要旨
body {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
回答by Scott Selby
add this to the css
将此添加到 css
{
background: black url("/image/background.jpg") no-repeat fixed center;
height: 100%;
width:100%
}
回答by Devon Bernard
I think using a div would be the easiest way to get the effect you are looking for.
我认为使用 div 将是获得您正在寻找的效果的最简单方法。
<div id="background">
<img src="/image/background.jpg" class="stretch" alt="" />
</div>
<style>
#background {
background-color:#000000;
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
z-index: -1;
}
.stretch {
width:100%;
height:100%;
}
</style>
