0 

<!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 开始。当我使用背景位置时会发生什么，背景在顶部循环。而不是这个，我希望它上面的区域是白色的。

使用 top: 155px 或类似的大小很容易做到这一点，但我想要完成的是将文本保持在原位。

我正在修改一个网站的 CSS，所以我不能添加任何新的 HTML。这可能吗？

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

4

1 回答 1

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>

于 2018-10-28T14:26:01.713 回答