我有一个固定背景图片的网站。 滚动时，此图像由文本块恢复。 保持滚动，文本块上升，并显示另一个背景图像。 再次滚动和另一个文本块恢复固定的背景图像...等。 我在互联网上有一些代码可以做到这一切，所有这一切都有效。
我希望我的背景能够适应屏幕的宽度。 我的问题是我可以使我的图像调整大小与浏览器的宽度大小相对应，但是包含图像的div块适合浏览器的高度。让我们说，在移动设备上，我的页面顶部有我的小图像，下面没有任何内容，除非我滚动...然后文本块出现在他的屏幕上并恢复BG图像......
所以我希望我的BG图像适合浏览器的宽度，div符合图像的高度......
这可能还是我应该改变我的设计？
非常感谢。
/* --------------------------------
Primary style
-------------------------------- */
html * {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-size: 100%;
font-family: "Roboto", sans-serif;
color: #3d3536;
background-color: #1f1f1f;
}
body, html {
/* important */
height: 100%;
}
a {
color: #b4d7a8;
text-decoration: none;
}
/* --------------------------------
Modules - reusable parts of our design
-------------------------------- */
.cd-container {
/* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
width: 90%;
max-width: 768px;
margin: 0 auto;
}
.cd-container::after {
/* clearfix */
content: '';
display: table;
clear: both;
}
/* --------------------------------
Main components
-------------------------------- */
.cd-main-content {
/* you need to assign a min-height to the main content so that the children can inherit it*/
height: 100%;
position: relative;
z-index: 1;
}
.cd-fixed-bg {
position: relative;
min-height: 100%;
width: auto;
/*background-size: cover;*/
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
background-repeat: no-repeat;
background-position: center 52px;
z-index: 1;
background-attachment: fixed;
}
.cd-fixed-bg h1, .cd-fixed-bg h2 {
position: absolute;
left: 50%;
top: 50%;
bottom: auto;
right: auto;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
width: 90%;
max-width: 1170px;
text-align: center;
font-size: 30px;
font-size: 1.875rem;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
color: white;
}
.cd-fixed-bg.cd-bg-1 {
background-image: url("http://s24.postimg.org/mr0dkdzv9/MINION.png");
}
.cd-fixed-bg.cd-bg-2 {
background-image: url("http://s24.postimg.org/mr0dkdzv9/MINION.png");
}
.cd-fixed-bg.cd-bg-3 {
background-image: url("http://s24.postimg.org/mr0dkdzv9/MINION.png");
}
.cd-fixed-bg.cd-bg-4 {
background-image: url("http://s24.postimg.org/mr0dkdzv9/MINION.png");
}
@media only screen and (min-width: 768px) {
.cd-fixed-bg h1, .cd-fixed-bg h2 {
font-size: 36px;
}
.cd-fixed-bg {
/*background-position: center 70px;
/*height: 100%; */
}
}
@media only screen and (min-width: 1170px) {
.cd-fixed-bg {
/*background-attachment: fixed;*/
background-position: center 70px;
}
.cd-fixed-bg h1, .cd-fixed-bg h2 {
font-size: 48px;
font-weight: 300;
}
}
.cd-scrolling-bg {
position: relative;
min-height: 100%;
padding: 4em 0;
line-height: 1.6;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
z-index: 2;
}
.cd-scrolling-bg.cd-color-1 {
background-color: #3d3536;
color: #a6989a;
}
.cd-scrolling-bg.cd-color-2 {
background-color: #99a478;
color: #3d3536;
}
.cd-scrolling-bg.cd-color-3 {
background-color: #b4d7a8;
color: #3d3536;
}
@media only screen and (min-width: 768px) {
.cd-scrolling-bg {
padding: 8em 0;
font-size: 20px;
font-size: 1.25rem;
line-height: 2;
font-weight: 300;
}
}<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8">
<script src="js/modernizr.js"></script> <!-- Modernizr -->
</head>
<body>
<main class="cd-main-content">
<div class="cd-fixed-bg cd-bg-1">
<!--<img src="img/HEADER.png" class="cd-fixed-bg">-->
</div> <!-- cd-fixed-bg -->
<div class="cd-scrolling-bg cd-color-2">
<div class="cd-container">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et ipsum quam. Mauris justo mauris, imperdiet quis metus ac, varius volutpat eros. Aliquam dapibus semper enim, vitae condimentum augue iaculis ac. Sed sit amet leo commodo enim tempus aliquet. Donec eu metus elit. Aenean rhoncus sapien ut mi ullamcorper, vitae blandit tortor lacinia. Suspendisse posuere eros nec lorem congue porttitor. Vivamus efficitur nulla vitae interdum mollis. Cras ut quam semper, interdum eros sit amet, vulputate purus. Ut facilisis bibendum cursus. Mauris rhoncus, justo eu molestie tempor, lorem sem vulputate arcu, quis mattis quam nibh a tellus. Phasellus semper arcu risus, vel blandit erat lobortis consectetur. Quisque pharetra tincidunt tortor sed laoreet. Nunc posuere, eros eget convallis tristique, lacus felis dictum magna, ac imperdiet dolor nunc et arcu.
Donec dui orci, pretium tincidunt sagittis ut, aliquam vel lorem. Donec pretium blandit mi in dictum. Fusce ligula lectus, sagittis eu orci eget, facilisis facilisis dolor. Duis at varius nibh. Integer pretium magna et egestas vulputate. Sed sed interdum orci. In vitae diam faucibus, dignissim erat et, convallis purus.
Aliquam placerat elit sem, ac efficitur augue vestibulum at. Curabitur nec leo posuere, varius elit id, sollicitudin erat. Sed ante odio, finibus luctus justo eget, lacinia venenatis nisl. Vestibulum nec felis quis risus porta lobortis. Suspendisse consectetur orci eget neque ornare, eu bibendum nibh bibendum. Nam ac ligula in sem iaculis posuere quis quis augue. Nulla laoreet nec nibh lobortis porta. Morbi feugiat, nisl nec fermentum interdum, enim sem maximus purus, vel vestibulum elit ligula et justo. Cras consequat ut lectus in viverra. Aenean tempor scelerisque elit. </p>
</div> <!-- cd-container -->
</div> <!-- cd-scrolling-bg -->
<div class="cd-fixed-bg cd-bg-2">
<h2>Lorem ipsum dolor sit amet.</h2>
</div> <!-- cd-fixed-bg -->
<div class="cd-scrolling-bg cd-color-3">
<div class="cd-container">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et ipsum quam. Mauris justo mauris, imperdiet quis metus ac, varius volutpat eros. Aliquam dapibus semper enim, vitae condimentum augue iaculis ac. Sed sit amet leo commodo enim tempus aliquet. Donec eu metus elit. Aenean rhoncus sapien ut mi ullamcorper, vitae blandit tortor lacinia. Suspendisse posuere eros nec lorem congue porttitor. Vivamus efficitur nulla vitae interdum mollis. Cras ut quam semper, interdum eros sit amet, vulputate purus. Ut facilisis bibendum cursus. Mauris rhoncus, justo eu molestie tempor, lorem sem vulputate arcu, quis mattis quam nibh a tellus. Phasellus semper arcu risus, vel blandit erat lobortis consectetur. Quisque pharetra tincidunt tortor sed laoreet. Nunc posuere, eros eget convallis tristique, lacus felis dictum magna, ac imperdiet dolor nunc et arcu.
Donec dui orci, pretium tincidunt sagittis ut, aliquam vel lorem. Donec pretium blandit mi in dictum. Fusce ligula lectus, sagittis eu orci eget, facilisis facilisis dolor. Duis at varius nibh. Integer pretium magna et egestas vulputate. Sed sed interdum orci. In vitae diam faucibus, dignissim erat et, convallis purus.
Aliquam placerat elit sem, ac efficitur augue vestibulum at. Curabitur nec leo posuere, varius elit id, sollicitudin erat. Sed ante odio, finibus luctus justo eget, lacinia venenatis nisl. Vestibulum nec felis quis risus porta lobortis. Suspendisse consectetur orci eget neque ornare, eu bibendum nibh bibendum. Nam ac ligula in sem iaculis posuere quis quis augue. Nulla laoreet nec nibh lobortis porta. Morbi feugiat, nisl nec fermentum interdum, enim sem maximus purus, vel vestibulum elit ligula et justo. Cras consequat ut lectus in viverra. Aenean tempor scelerisque elit. </p>
</div> <!-- cd-container -->
</div> <!-- cd-scrolling-bg -->
<div class="cd-fixed-bg cd-bg-3">
<h2>Lorem ipsum dolor sit amet.</h2>
</div> <!-- cd-fixed-bg -->
</main> <!-- cd-main-content -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/main.js"></script> <!-- Resource jQuery -->
</body>
</html>
答案 0 :(得分：0)
div的高度似乎受到文本量的影响。随着屏幕尺寸变小，div中的文本占用更多的垂直空间。尝试将div的最小高度更改为该大小的不同百分比。您还可以尝试添加最大高度，给出高度应该有多大的范围。