Question

h1在背景图像后面。我试过使用z-index和position：绝对和相对，但没有任何变化。如何使背景图像永远保持背景，而不必在其顶部添加其他所有元素？

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>

Answer 1

我会避免将身体位置设为绝对位置。

如果您希望标题后面的背景为默认值，而又不使用任何z-index使其成为绝对值。确保不是图像与文本颜色相同的情况，只是使其看起来不像文本而已：）

Answer 2

带有黑色文本的黑色图像是这里的问题...在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>

背景图片位于H1上方

2 个答案: