Question

我在页面上有一个水平和垂直居中的图像。我想这样，当用户向下滚动时，它下面的内容实际上就会出现，好像顶级内容是固定的。就像这里的效果...... http://tympanus.net/codrops/2013/05/02/fixed-background-scrolling-layout/

只有问题是他们使用background-attachment：fixed属性。我无法使用此功能，因为我需要将图像作为内容（实际上它将更改为HTML5视频）。

我的代码在这里...... http://jsfiddle.net/5jphd/1/

HTML

<div class="image">
    <img src="http://upload.wikimedia.org/wikipedia/commons/3/36/Hopetoun_falls.jpg">
    <div class="text">Scroll down</div>
</div>
<div class="wrap">
    Here is some content
</div>

CSS

html, body {height: 100%}

body {
    padding: 0;
    margin:0;
    font-family: sans-serif;
}
.image {
    position: relative;
    left: 0px;      
    height: 100%;
    background-position: 50% 50%;
    background-size: cover;
    background-attachment: scroll;
    text-align: center;
}
img {
  max-width: 90%;
  max-height: 70%;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

.text {
    position: absolute; 
    bottom: 20px;
    left:50%;
    margin-left: -44px;
}
.wrap {
    background-color: lightblue;
    text-align: center;
    padding: 100px;
    font-size: 30px;
    min-height: 1000px;
}

这可能与此标记有关吗？因此，当您向下滚动时，内容会上升并与图像重叠。

Answer 1

好的，我已经做到了，这就是我想要实现的目标。我只是制作视频并滚动文字位置：固定，并使主体内容位置：相对 - http://jsfiddle.net/5jphd/4/

html, body {height: 100%}

body {
    padding: 0;
    margin:0;
    font-family: sans-serif;
}
.image {
    position: relative;
    left: 0px;      
    height: 100%;
    background-position: 50% 50%;
    background-size: cover;
    background-attachment: scroll;
    text-align: center;
}
img {
  max-width: 90%;
  max-height: 70%;
  margin: auto;
  position: fixed;
  top: 0; left: 0; bottom: 0; right: 0;
}

.text {
    position: fixed;    
    bottom: 20px;
    left:50%;
    margin-left: -44px;
}
.wrap {
    background-color: lightblue;
    text-align: center;
    padding: 100px;
    font-size: 30px;
    min-height: 1000px;
    position:relative;
}

Answer 2

JSFiddle

我认为这是你基本上要求的。记住纵横比，这就是高清视频在320x480左右的样子。

#bg {
    position:absolute;
    position:fixed;
    top:0;
    width:100%;
    height:100%;
    margin:auto;
    overflow:hidden;
    z-index:-1;
}
#bg img { max-width:100%; }

如何在没有背景图像的情况下创建固定背景滚动效果？

2 个答案: