背景图像位于h1的顶部



h1位于背景图像后面。我试过使用z索引和位置:绝对和相对,但没有改变。如何使背景图像永远保持为背景,而不必在其上添加其他元素?

body {
background-image: url("https://wallpaperaccess.com/full/396538.jpg");
background-repeat: no-repeat;
background-size: cover;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="index.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hotoi Sebastian | Front-End Developer & Web Designer</title>
</head>
<body>
<div class="text">
<h1>Sebastian Hotoi</h1>
</div>
</body>
</html>

黑色图像和黑色文本是这里的问题。。。在css 中添加颜色:白色

body {
background-image: url("https://wallpaperaccess.com/full/396538.jpg");
background-repeat: no-repeat;
background-size: cover;
}
.text {
color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="index.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hotoi Sebastian | Front-End Developer & Web Designer</title>
</head>
<body>
<div class="text">
<h1>Sebastian Hotoi</h1>
</div>
</body>
</html>

我会避免使身体位置绝对。

如果你想要标题后面的背景,那应该是默认的,而不是绝对的,我们使用任何z索引。确保这不是图像与文本颜色相同,只是让它看起来不在那里:(

最新更新