固定背景图片

Question

我很想知道如何在固定的 div 中创建背景图像。当您向下（或向上）滚动时，图像会保留，但内容会流过 div。这是一个做我想解释的事情的网站，让您更好地了解我想描述的内容。 jWebMedia 我一直认为这样的网站非常有吸引力，想知道如何开发它。如果您知道任何涵盖此内容的好文章，那就太好了。

感谢您的帮助！

Answer 1

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

Answer 2

固定定位元素

fixed The element is positioned relative to the browser window

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

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

固定背景图片

CSS background-attachment Property

fixed The background is fixed with regard to the viewport

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

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

Answer 3

这些实际上就是您在问题标题中所说的内容 – 固定背景图片。

background-attachment:fixed 修复了关于 viewport 的背景图片——所以当你滚动一个有这样背景图片的元素进出视口时，产生这种效果，就这么简单。

固定背景图片

Fixed Background Image

html

css

fixed

background-image

固定定位元素

固定背景图片