固定背景图像答案

【问题标题】：Fixed Background Image固定背景图像
【发布时间】：2015-02-16 21:21:35
【问题描述】：

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

感谢您的帮助！

【问题讨论】：

标签： html css background-image fixed

【解决方案1】：

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

【讨论】：

完美。正是我想要完成的。感谢您的帮助。

【解决方案2】：

固定定位元素

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

/*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 属性

fixed背景相对于视口是固定的

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

【讨论】：

【解决方案3】：

这些实际上就是您在问题标题中已经说过的 - 固定背景图像。

background-attachment:fixed 修复了与 viewport 相关的背景图像 - 因此，当您将具有此类背景图像的元素滚动进出视口时，会产生这种效果，简单如下那个。

【讨论】：

background-position: fixed 不存在。
@user3790069：你说得对，我的意思当然是background-attachment。已编辑。
@mitch：那么你到底是什么意思？尤其是当您问 “我很想知道如何在固定的 div 中创建背景图像” 并且现在已经接受了几乎可以做到这一点的答案。
@CBroe 你是对的，抱歉。我认为 CSS 有更多内容，但在我修改了 CSS 之后，我所需要的只是 background-attachment
正如我所说，它实际上非常简单。接受的答案中提到的background-size 属性确实派上了用场，当您希望自动调整背景图像的大小以适应元素尺寸时，您可能还想了解提供的可能性 (developer.mozilla.org/en-US/docs/Web/CSS/background-size)