Question

我在过去的两天里一直在研究这个话题，尝试了250多种代码，并且在我的智慧结束时，这就是为什么我现在在这里...我觉得我非常接近一个解决方案，所以希望有人可以把它放在边缘......我对CSS很新，所以如果我离开这里我很道歉......

我正在努力实现您可以在stumbleupon.com主页上查看的效果。加载页面时，无论分辨率如何，bg图像都完全适合浏览器的可视区域。 bg图像不固定，因此您可以向下滚动以查看更多内容。您可以在http://www.bakkenbaeck.no/上看到完全相同的效果...原始图像再次完美匹配，并且不会修复下面的内容。

当我遇到StackOverflow问题并在此回答Making a div fit the initial screen

时，我以为我终于找到了答案

我按照那里的指示来到哦 - 如此接近......但没有雪茄。

您可以在www.konnect.co

上查看我的测试域

我为此bg图片输入的代码是

#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;
}

这会在我检查过的2个浏览器中完美显示图像。但是，bg图像与页面上第二个div的内容完全重叠。我创建了一个第二个div，给它一个bg颜色，并添加了一些内容来测试，它隐藏在bg图像后面的div上面。如果您将浏览器的大小调整为较小的大小，则可以在bg图像变小时开始滚动。我在这里错过了bg图像div高度的东西吗？我已经尝试了几种高度选项，但无法改变任何东西。任何帮助将不胜感激。

Answer 1

这是您的解决方案：

对两个类使用绝对定位，并将其后面的内容放在top：100％！

＆＃13;

    .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;

    }

＆＃13;

<div class='image'></div>
<div class='content'>Here is Your solution!!! :-)</div>

＆＃13;

Answer 2

我正在努力实现与你相同的事情（至少我是这么认为的）。这样的事情对你有用吗？

http://jsfiddle.net/tKNzR/

html, 
body {
   height:100%;
}

#header-div {
   height:100%;
   width:100%;
   position:relative;
   top:0;
   left:0;
}

要在＃header-div中创建图像，请始终填充屏幕，您可以使用名为backtstretch的jquery插件。

Answer 3

看起来很简单，对我有用。

我查看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;
}

这里的问题是background-attachment: fixed;。这将确保图像不会与内容一起滚动。

您可以在此处找到详细信息：

http://www.w3schools.com/cssref/pr_background-attachment.asp

Answer 4

试试这个：

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

Answer 5

你需要这个属性：

display:table;

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*/
}

Answer 6

如果你为＃wrapper-8输入css：

的位置是：绝对的; z-index：-1;

然后内容将可见

Answer 7

获得解决方案移除位置：第一个div的绝对位置和＃wrapper-8根据您的需要给出最小高度。

Answer 8

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

如何使div bg图像适合全屏，并允许滚动下面的内容

8 个答案:

CSS