如何使用可缩放的全尺寸背景图像制作 3 个 div答案

【问题标题】：How to make 3 divs with scaleable fullsize background images如何使用可缩放的全尺寸背景图像制作 3 个 div
【发布时间】：2014-01-29 21:17:31
【问题描述】：

我想做一个单页网站，所以你必须向下滚动才能查看内容。我有 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-tricks.com/perfect-full-page-background-image 或者看看buildinternet.com/project/supersized（它不像听起来那么容易，你需要 javascript 来保持旧浏览器的比例！）
感谢您的评论，但您的链接是关于整个页面的全尺寸背景图片。我想在一页上为 3 个不同的 div 提供 3 个不同的背景图像。

标签： css image html background

【解决方案1】：

您的 CSS 看起来很适合尝试。当用户向下浏览页面时，您的 div 的背景可能会不断滚动。背景的行为类似于 position:fixed;元素。要停止这种情况，只需添加以下内容：

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

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

这有点hacky，但你可以尝试这样做：

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/

【讨论】：

感谢您的评论，我试过了，但图片不显示（我在css中将背景图片添加到div1、div2和div3），我只是得到一个白页。
您是否更改了默认样式？您需要添加：宽度：100%；。我用小提琴更新了我的 anweser
嗨 Nico，是的，它现在可以使用此代码，但尝试将背景图片放入 div，然后缩放浏览器的宽度/高度，您会看到图片被拉伸了。
这是我的小提琴，我没有看到拉伸的图像？ fiddle.jshell.net/bah93/2如果问题仍然存在，请自行调整。顺便提一句。你的意思是拉伸还是扭曲？当然，图像会随着浏览器的大小进行拉伸。但结果应该保留。如果不希望它变宽或变小，请在 div1-3 上使用 min-width, max-width
如果你不希望图像被裁剪，你也可以使用：background-size: contain; 但这并不总是会填满特定的div。

【解决方案2】：

我最近做了这个。我必须根据屏幕大小为每个 div 放置 5 个背景..

别担心，让我们试试这个..

您需要 js/jquery 才能获得结果，或者我使用 jquery 将 div 高度精确设置为屏幕高度..

代码： 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>

希望这对你有帮助..

【讨论】：

您好，感谢您的反应。我想尝试您的解决方案，但我不熟悉如何创建 jquery 部分。我必须将代码放在 .js 文件中吗？我试过了，但它给出了语法错误。希望你能帮助我？
试试这个我已经编辑了:)
非常感谢您的帮助 Krunal。我试过了，dreamweaver 仍然在脚本的第一行给我一个语法错误，但我还是试过了，它似乎将图像高度缩放到浏览器大小，这很好，但图像的纵横比是不好。图像被拉伸。例如，如果我使用 1920x927 图像作为背景，并且我在分辨率为 1200x1024 的屏幕上使用您的脚本，它会拉伸高度，因此图像看起来会被拉伸。