7

在过去的两天里，我一直在研究这个话题，尝试了 250 多种代码变体，并且不知所措，这就是我现在在这里的原因......我觉得我非常接近解决方案所以希望这里有人可以把它放在边缘......我对CSS相当陌生，所以如果我在这里离基地很远，我道歉......

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

当我在这里遇到 StackOverflow 问题和答案时，我以为我终于找到了答案让 div 适合初始屏幕

我按照那里的指示走得很近……但没有雪茄。

您可以在 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 颜色并添加了一些内容来测试，它在它上面的 div 中隐藏在 bg 图像后面是不可见的。如果您将浏览器调整为更小的尺寸，它将允许您随着背景图像变小而开始滚动。我在这里缺少 bg 图像 div 高度的东西吗？我尝试了几个高度选项，但无法改变任何东西。任何帮助将不胜感激。

4

8 回答 8

10

这是您的解决方案：

对两个类都使用绝对定位并将内容放在它后面，顶部：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>

于 2014-12-18T02:17:43.443 回答
3

我正在努力实现与您相同的目标（至少我是这么认为的）。像这样的东西对你有用吗？

http://jsfiddle.net/tKNzR/

html, 
body {
   height:100%;
}

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

要使#header-div 中的图像始终填满屏幕，您可以使用名为backtstretch的 jquery 插件。

于 2013-10-01T09:47:22.383 回答
2

这似乎很简单，对我有用。

我查看了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

于 2016-11-26T08:01:52.453 回答
1

尝试这个 ：

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;
}
于 2013-12-03T12:57:05.510 回答
1

你需要这个属性：

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*/
}
于 2014-01-03T19:38:24.430 回答
0 
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;
}
于 2014-08-21T20:45:50.780 回答
0

如果您为#wrapper-8 放入css：

位置：绝对；z 指数：-1；

然后内容将可见

于 2013-05-17T04:56:39.137 回答
0

得到解决方案 remove position:absolute for the first div 并在 #wrapper-8 根据您的需要给出 min-height 。

于 2013-05-17T06:44:26.560 回答