Question

考虑这个例子html：

<body>
<div id="background">
        <div id="area1">.....</div>
        <div id="area2">.....</div>
        <div id="area3">.....</div>
    </div>
</body>

我的area1，area2和area3 div都位于我想要的位置，使用Twitter的bootstrap助手库。

我现在想把背景图片放在所有这些背后。但是，我希望将背景图像放置在特定位置。所以我用我的图像的URL设置我的CSS背景。图像只占用下面3个div占用的空间。

如果我改变背景div的位置，那么其他3个区域随之移动。

因此，我想知道，如何在不改变其他div定位的情况下将背景图像定位在特定位置？

由于

Answer 1

我不确定我完全明白你想做什么，但我认为这样的事情会有所帮助

#background div {background-image:url(image.jpg);
#area1{background-position: left top}
#area2{background-position: center top}
#area3{background-position: right top}

Answer 2

使用css属性background-position：Codertools.com / sitepoint.com

e.g：

background-position: 50px 100px;

Answer 3

不要移动div - 使用background-position更改背景图片的位置。您可以精确指定位置（以像素为单位x y），百分点（x% y%），或者按顶部/中间/底部和左/中/右点进行锚定。例如：

#background {
  background-image: url('cat.jpg');
  background-position: center top;
}

定位div的内容独立于子div

3 个答案: