html - CSS 背景位置相对于文档而不是元素?

标签 html css

我想知道这是否可能,能够将图像的背景位置设置到 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

最佳答案

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

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

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

然而,背景只会显示在它所附加的元素上,即使它从屏幕的左上角开始。 (这对于视差效果很方便。)

编辑:作为旁注,如果您使用普通背景属性,则 fixed 设置为

background-attachment: fixed;

关于html - CSS 背景位置相对于文档而不是元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16952746/

相关文章:

html - 使用 CSS 垂直居中 3 个段落

html - 将 div 放置在重叠 div 后面

css - 在 RMarkdown 中更改 block 背景颜色

html - 链接在重叠的 Div 中不起作用

html - body 上的字体两次

html - 将我的导航栏链接居中

javascript - 如何使用angular js在母版页中设置事件菜单

html - 移动浏览器的反响应样式

html - div 溢出被隐藏,但仍然可以使用键盘右箭头键滚动

javascript - 向下滚动整个浏览器窗口