Question

<!DOCTYPE html>
<html>
<head>
<style>
body { 
    background-image: url(http://web.archive.org/web/20110330221051if_/http://www.roblox.com/images/cssthemes/outrageous2/bkg.jpg);

    background-size: auto;
    background-repeat: repeat;
    background-position: 0px 155px;
}

h1, p {
	color: #fff;
}
</style>
</head>
<body>

<h1>TEXT 1 - H1</h1>
<p>TEXT 2 - P</p>

</body>
</html>

这是我的设置简化后的样子。我想做的是使背景从0px 155px开始。当我使用背景位置时，背景会在顶部循环。与其相反，我希望它上面的区域是白色的。

这很容易做到：155px或类似的顶部，但是我要完成的是将文本保留在原处。

我正在CSS修饰网站，所以无法添加任何新的HTML。这可能吗？

编辑：我需要它在X和Y方向上重复。

Answer 1

使用伪元素创建背景图层，即可轻松控制位置：

body:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:150px;
  left:0;
  right:0;
  bottom:0;
  background:url(http://web.archive.org/web/20110330221051if_/http://www.roblox.com/images/cssthemes/outrageous2/bkg.jpg);
  margin:0;
}

h1,
p {
  color: #fff;
}

<h1>TEXT 1 - H1</h1>
<p>TEXT 2 - P</p>

如何在不移动对象内部其他内容的情况下移动它的背景图像？

1 个答案: