Html 如何使 div bg 图像适合全屏并允许滚动下面的内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16601590/
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
how to make div bg image fit full screen and allow scrolling for content underneath
提问by Chris
I've researched this topic for the past 2 days straight, tried 250+ variations of code, and am at my wits end, which is why I'm now here... I feel like I'm very close to a solution so hopefully someone here can put it over the edge...I'm fairly new to CSS so if I'm way off base here I apologize...
过去 2 天我一直在研究这个主题，尝试了 250 多种代码变体，现在我已经无所适从，这就是我现在在这里的原因……我觉得我非常接近解决方案，所以希望这里有人可以把它放在边缘......我对 CSS 还很陌生，所以如果我在这里离基地很远，我道歉......
I am trying to achieve an effect that you can view on stumbleupon.com's homepage. When the page is loaded, the bg image perfectly fits into the viewable area of the browser regardless of resolution. The bg image is not fixed and you can therefore scroll down to view more content. You can see the exact same effect on http://www.bakkenbaeck.no/...again original image fits perfectly, and is not fixed with content below.
我正在尝试实现您可以在 stumbleupon.com 的主页上查看的效果。加载页面时，无论分辨率如何，bg 图像都完全适合浏览器的可视区域。bg 图像不是固定的，因此您可以向下滚动以查看更多内容。您可以在http://www.bakkenbaeck.no/上看到完全相同的效果......再次原始图像完美契合，并且没有固定在下面的内容中。
I thought I finally found my answer when I came across the StackOverflow question and answer here Making a div fit the initial screen
当我遇到 StackOverflow 问题并在此处回答使 div 适合初始屏幕时，我以为我终于找到了答案
I followed instructions there and came oh-so-close...but no cigar.
我按照那里的指示走，非常接近......但没有雪茄。
You can view my test domain I've set this up on at www.konnect.co
您可以查看我在 www.konnect.co 上设置的测试域
The code I entered for this bg image is
我为此背景图像输入的代码是
#wrapper-8 {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background: url(http://bakkenbaeck.no/content/01-work/01-easybring/01.jpg)
no-repeat center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
This displays the image perfectly in 2 browsers that I've checked. However, the bg image is completely overlapping the content of the 2nd div on the page. I created a 2nd div, gave it a bg color and added a bit of content to test, and it's invisible hiding behind the bg image from the div above it. If you resize the browser to a smaller size it will then allow you to start to scroll as the bg image gets small. Am I missing something with the bg image div height here? I've tried several height options but can't get anything to change. Any help would be greatly appreciated.
这在我检查过的 2 个浏览器中完美地显示了图像。但是，bg 图像与页面上第二个 div 的内容完全重叠。我创建了第二个 div，给它一个 bg 颜色并添加了一些内容进行测试，它隐藏在它上方 div 的 bg 图像后面是不可见的。如果您将浏览器调整为较小的尺寸，它将允许您随着 bg 图像变小而开始滚动。我在这里错过了 bg 图像 div 高度的某些内容吗？我尝试了几个高度选项，但无法改变任何东西。任何帮助将不胜感激。
回答by Eteroxee
Here is Your solution:
这是您的解决方案：
Use absolute positioning to both class and put the content after it with top: 100%!
对两个类都使用绝对定位，并将内容放在 top: 100% 之后！
.image {
position: absolute;
width: 100%;
height: 100%;
background-image: url(images/bg.jpg);
background-size: cover;
background-color: purple;
}
.content {
position: absolute;
top: 100%;
width: 100%;
height: 200px;
background: yellow;
}<div class='image'></div>
<div class='content'>Here is Your solution!!! :-)</div>回答by Daniel
I'm trying to achieve the same thing as you do (at least I think so). Would something like this work for you?
我正在努力实现和你一样的目标（至少我是这么认为的）。这样的事情对你有用吗？
html,
body {
height:100%;
}
#header-div {
height:100%;
width:100%;
position:relative;
top:0;
left:0;
}
To make an image in #header-div always fill the screen you could make use of a jquery plugin called backtstretch.
要使 #header-div 中的图像始终填满屏幕，您可以使用名为backtstretch的 jquery 插件。
回答by Mukund Jalan
It seems pretty simple and worked for me.
这看起来很简单，对我有用。
I looked at http://www.stumbleupon.com/and using the chrome's developer mode got the trick they used to do it. The first divinside body has the class homepagewhich uses the following properties
我查看了http://www.stumbleupon.com/并使用 chrome 的开发人员模式获得了他们过去使用的技巧。第一个div内部主体具有homepage使用以下属性的类
.homepage {
min-height: 720px;
position: relative;
height: 100%;
background: url(https://nb9-stumbleupon.netdna-ssl.com/zuZ2r1FsBTumc2VqMc6CtA) center center;
background-repeat: no-repeat;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
color: #fff;
}
The catch here is background-attachment: fixed;. This will ensure that the image doesn't scroll along with the content.
这里的问题是background-attachment: fixed;。这将确保图像不会随着内容滚动。
You can find detailed information on it here:
您可以在此处找到有关它的详细信息：
http://www.w3schools.com/cssref/pr_background-attachment.asp
http://www.w3schools.com/cssref/pr_background-attachment.asp
回答by ashwin
Try this :
尝试这个 ：
body {
background-image:url('name.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:100% 100%;
//min-height:100%;
//min-width:100%;
background-size:cover;
}
回答by Rajesh Paul
You need this property:
你需要这个属性：
display:table;
CSS
CSS
#wrapper-8 {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background: url(http://bakkenbaeck.no/content/01-work/01-easybring/01.jpg)
no-repeat center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
display:table;/*Added this*/
}
回答by ssomnoremac
html,body,section{
height:100%;
}
.frame1{ /* <section class='frame1'> */
position: absolute; /* mama told me never to use this but all my friends do */
top: 0; right: 0; bottom: 0; left: 0; /* section shows on load (top:0)*/
background: url(shot1.jpg) no-repeat center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.frame2{ /* <section class='frame2'> */
position: absolute; /* mama told me never to use this but all my friends do */
top: 100%; right: 0; bottom: 0; left: 0; /* section scrolled to (top:100%) */
background: url(shot2.jpg) no-repeat center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
回答by Tom
If you put into css for the #wrapper-8:
如果您为 #wrapper-8 放入 css：
position:absolute; z-index: -1;
位置：绝对；z-索引：-1；
then the content will be visible
然后内容将可见
回答by somesh
Got solution remove position:absolute for the first div and in #wrapper-8 give min-height as per your need.
得到了解决方案 remove position:absolute 对于第一个 div 并在 #wrapper-8 中根据您的需要给出 min-height 。
