Div 背景未与 Div 定位

发布于 2024-07-09 01:09:55 字数 745 浏览 7 评论 0原文

我有几个 Div，我使用类和 ID 对其进行样式设置，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 一起定位，而是保留在左上角，以及如何解决这个问题？

原文

I have a couple of Divs which I style using a class and an ID, he div's themselves are emtpy since they are only placeholders for their background. Example Div:

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

Then I style them using this 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;
}

As long as the Div is in the left top of the document the Image shows correctly but when the Div is placed somewhere else on the page the image stays (invisible) in the top left corner of the page showing only the part which overlaps with the div (in the example this would be the bottom part of the image).

EDIT
I'm trying to position these Divs without effecting my other layout, they are behind the other layout. This works except for the fact that the background image doesn't follow the divs position.
So basically my question is, why isn't the background for the ranImg1 div positioning with the div but stays in the left top corner, and how to fix this?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

是伱的 2024-07-16 01:09:55

您的 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;

我不确定除了删除背景附件之外是否还有帮助（还没有足够的咖啡！）

your background-attachment:fixed will attach the background image relative to the browser window. if you want it to "follow" the div position, just remove the line:

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

you could also set the background-position attribute to set the background relative to the containing div: