gpt4 book ai didi

css - 如何在不移动其中其他内容的情况下移动对象的背景图像?

转载 作者:太空宇宙 更新时间:2023-11-04 06:48:54 27 4
gpt4 key购买 nike

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

使用 top: 155px 或类似值很容易做到这一点,但我想要完成的是将文本留在原地。

我正在对一个网站进行 CSS 修改,因此我无法添加任何新的 HTML。这可能吗?

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

最佳答案

使用伪元素创建背景层,轻松控制位置:

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>

关于css - 如何在不移动其中其他内容的情况下移动对象的背景图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53032481/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com