2

我想知道这是否可能，能够将图像的背景位置设置到 html 文档的左上角，而不是作为背景的元素的左上角。

伪代码

body {
    background-image: url(someurlhere);
    background-position: top left;
}
element {
    background-image: url(sameurlhere);
    background-position: top left /*Relative to body not element*/;
}

如果我需要为这个问题提供任何其他信息，请告诉我，我会修改它，但我相信它非常简单。

编辑：我不能使用绝对定位，我正在加载动态内容，我想要一个平铺图像来适应几个元素的背景，从而在页面中产生孔的错觉。

编辑2：这里有一些图片可以更好地解释问题。

图片 1：注意标题元素中的重复模式。http://i.imgur.com/3lWguRE.png

图 2：这种变化是我的目标。http://i.imgur.com/WtOeCQ2.png

4

3 回答 3

7

第一个问题是为什么你不只是在body元素上设置背景图像。

但如果这不合适，您可以选择将元素上的背景图像设置为fixed，在这种情况下，它将固定在浏览器窗口的左上角并且不会滚动。

element {background: url(image.fig) repeat fixed;}

但是，背景只会显示在它所附加的元素上，即使它从屏幕的左上角开始。（这对于视差效果很方便。）

编辑：作为旁注，如果您使用的是普通背景属性，fixed则设置为

background-attachment: fixed;
于 2013-06-06T02:38:54.683 回答
0

您所要做的就是将您的元素包装在一个绝对的 div 中，并按照您的意愿定位它。

于 2013-06-06T02:25:05.043 回答
0

您能否提供有关元素上下文的更多信息？它有任何定位设置吗？它在文档中的什么位置？我有点不清楚你到底想要完成什么。

将背景放在身体上会起作用吗？

这会将背景设置在左上角，但我怀疑这实际上是你想要完成的：

<div class="test">
</div>

.test:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background: url(http://i1112.photobucket.com/albums/k497/animalsbeingdicks/abd-318.gif);
  width: 352px;
  height: 263px;
}

http://jsbin.com/imurah/1/

于 2013-06-06T02:33:47.440 回答