Question

我很想知道如何在修复的div中创建背景图像。当您向下（或向上）向下滚动时，图像会停留，但内容会在div上方流动。这是一个我正在尝试解释的网站，让您更好地了解我想要描述的内容。 jWebMedia 我一直认为像这样的网站真的很有吸引力，想知道如何开发它。如果你知道有任何好的文章，那就太棒了。

感谢您的帮助！

Answer 1

background:url('http://yoururl');    
background-size: cover;
background-attachment: fixed;

Answer 2

固定定位元素

fixed元素相对于浏览器窗口定位

＆＃13;

/*only for this sample*/
body{
  margin:0;
}
div{
  width:100%;
  height:1000px;
  background:green;
}
nav{
  position:fixed;
  top:0;
  width:100%;
  height:40px;
  background:grey;
}

＆＃13;

<div>
<nav></nav>
</div>

＆＃13;

固定背景图片

CSS背景附件属性

fixed关于视口的背景是固定的

＆＃13;

/*only for this sample*/
body{
  margin:0;
}

.fixed{
  width:100%;
  height:2000px;
  background-image:url(http://assets3.whicdn.com/assets/registration/reg_wall/Header-Find-your-inspiration.jpg);
  background-size:cover;
  background-attachment:fixed;
}
.scroll{
  position:absolute;
  width:50px;
  height:50px;
  margin:20px;
  background:orange;
}

＆＃13;

<div class="fixed">
  <div class="scroll"></div>
</div>

＆＃13;

Answer 3

这些只是你在问题标题中已经说过的话 - 固定背景图片。

background-attachment:fixed修复了与视口相关的背景图像 - 因此当您将具有此类背景图像的元素滚动到视口内外时，会生成此效果，就这么简单。

固定背景图片

3 个答案:

固定定位元素

固定背景图片