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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 21:14:11  来源:igfitidea点击:

CSS Stretched Background Image

css

提问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>