Div 背景不与 Div 定位答案

【问题标题】：Div background doesn't position with the DivDiv 背景不与 Div 定位
【发布时间】：2010-09-24 19:55:38
【问题描述】：

我有几个我使用类和 ID 设置样式的 Div，他的 div 本身是空的，因为它们只是背景的占位符。示例 div：

<div id='ranImg1' class='ranImg'></div>

然后我使用这个 css 为它们设置样式：

.ranImg {
  position:fixed;
  z-index:0;
  width:250px;
  height:250px;
  display:block;
}
#ranImg1 {
  left:10px;
  top:200px;
  background-attachment:fixed;
  background-image:url(http://localhost/MyAlbum//images/background/ranPaperclips.png);
  background-repeat:no-repeat;
}

只要 Div 位于文档的左上角，图像就会正确显示，但是当 Div 放置在页面上的其他位置时，图像会保持（不可见）在页面的左上角，仅显示与 div 重叠（在示例中，这将是图像的底部）。

编辑我试图在不影响我的其他布局的情况下定位这些 Div，它们位于其他布局的后面。除了背景图像不跟随 div 位置这一事实之外，此方法有效。
所以基本上我的问题是，为什么ranImg1 div定位的背景不是div而是停留在左上角，以及如何解决这个问题？

【问题讨论】：

标签： css positioning background-image

【解决方案1】：

您的background-attachment:fixed 将附加相对于浏览器窗口的背景图像。如果您希望它“跟随”div 位置，只需删除该行：

#ranImg1{
  left:10px;
  top:200px;
  background-image:url(http://localhost/MyAlbum//images/background/ranPaperclips.png);
  background-repeat:no-repeat;
}

您还可以设置background-position 属性来设置相对于包含 div 的背景：

background-position: 0px 0px;

我不确定除了删除 background-attachment 是否会有所帮助（还没有足够的咖啡！）

【讨论】：