如何使用可扩展的全尺寸背景图像制作3个DIV

我想创建一个页面站点，因此您必须向下滚动以查看内容。我有3个不同的内容div。每个DIV应具有不同的背景图像，应根据浏览器的大小进行扩展，同时保持图像的纵横比。希望我要做什么？

这是我目前拥有的CSS：

.div1 {
height: 927px;
width: 100%;
background-image: url(bg3.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.div2 {
height: 927px;
width: 100%;
background-image: url(bg1.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.div3 {
height: 927px;
width: 100%;
background-image: url(bg2.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}

这是HTML：

<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>

您可以看到，它不会将每个DIV背景图像扩展到浏览器的正确大小。有人有一个很好的解决方案吗？

您的CSS对Attemp看起来不错。在用户向下浏览页面时，您的Divs的背景可能会不断滚动。背景的行为像位置：固定；元素。要停止这一点，只需添加以下内容：

background-attachment: scroll;
background-clip: border-box;

我对包含背景图像的DIV的静态高度感到困惑。我只想根据浏览器窗口调整宽度。

有点骇客，但是您可以尝试这样做：

html, body
{
    height: 100%;
}
.div1,.div2,.div3
{
    height: 100%;
    width: 100%
    position: absolute;
}
.div1
{
    top: 0;
    background-color: blue;
}
.div2
{
    top: 100%;
    background-color: red;
}
.div3
{
    top: 200%;
    background-color: yellow;
}

请参阅此处：http：//fiddle.jshell.net/bah93/

我最近做了。我必须根据屏幕尺寸将5个背景放在每个DIV上。

别担心让我们尝试一下..

您需要JS/jQuery才能获得结果，或者我服用了将DIV设置为屏幕高度的jQuery。

代码： html

 <div class="wrapper">
  <div class="page one"></div>
  <div class="page two"></div>
  <div class="page three"></div>
</div>

CSS

.page{ height: 927px;
       width: 100%;
       -webkit-background-size: 100% 100%;
       -moz-background-size: 100% 100%;
       -o-background-size: 100% 100%;
       background-size: 100% 100%;
       background-repeat: no-repeat;
       background-position: center center; 
      }
.page.one {background-image: url(bg1.jpg);}
.page.two {background-image: url(bg2.jpg);}
.page.three {background-image: url(bg3.jpg);}

jQuery

$(document).ready(function(){
    $('.page').css('height',window.innerHeight)
})

编辑部分：将其放在标题中，然后冷却：）

<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){
    $('.page').css('height',window.innerHeight)
})
</script>
</head>

希望这对您有帮助..

相关内容

最新更新

热门标签：