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

【问题标题】：How to create fixed background scrolling effect without background image?如何在没有背景图像的情况下创建固定的背景滚动效果？
【发布时间】：2014-01-27 04:56:58
【问题描述】：

我在页面上有一个水平和垂直居中的图像。我希望这样当用户向下滚动时，它下面的内容实际上会出现，就好像顶部的内容是固定的一样。喜欢这里的效果...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;
}

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

【问题讨论】：

我有点困惑.. 那为什么不直接使用固定的 HTML5 视频呢？您只需使内容背景透明。 顺便说一句，如果您使用高清 HTML5 视频背景，很多计算机都会像疯了一样滞后。即使是 5 秒的重复剪辑也像 5mb 一样，并且几乎使旧 PC/笔记本电脑和许多手机崩溃。
这是您想要实现的吗？ jsfiddle.net/5jphd/2
是的 GCyrillus 这是我追求的结果，除了图像必须在图像标签中，并且不使用背景图像。

标签： css

【解决方案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;
}

【讨论】：

【解决方案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%; }

【讨论】：