Question

让我想一想，我怎样才能解释我的问题。我有一个滚动页面，有很多div层......一个在另一个之下！他们的背景图像的分辨率为1920x1080像素！但他们应该填写完整的后台浏览器窗口。例如，当我缩放浏览器窗口时，图片应该自行缩放。

我见过一些jquery插件谁做得很好，但对我来说很重要的是backgroundImage在css中定义，因为即时通讯使用inview.js并尝试创建视差效果。这有可能吗？

谢谢特德

Answer 1

您可以使用background-size: cover，虽然它是CSS3属性，但有些浏览器不支持它。

http://www.w3schools.com/cssref/css3_pr_background-size.asp

修改：CSS Tricks提供的前缀和后备解决方案

html { 
    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;
}

Answer 2

试试这个......

html, body{
padding:0px;
margin:0px;
}

然后，为了使您的图像适用于超大型显示器（即：多屏幕等），请从<img>缩放并设置低z-index。

.background{
width:100%;
height:100%;
position:fixed;
top:0px;
left:0px;
z-index:0;
}


<img src="background.jpg" class="background">

将background.jpg更改为您的背景图片＆amp;将<img>标记放在页面底部，以便最后加载。如果z-index没有显示在正确的级别（例如：覆盖其他元素），则可能必须使用z-index

使背景图像可扩展到窗口

2 个答案: