我试图将文本放在图像上，但是当我这样做时，文本的背景会变成黑色，与文档背景的颜色相同。我没有在 css 中的任何地方指定或设置它，我不知道它为什么这样做。任何帮助将不胜感激
我检查了是否已将文档中其他任何地方的 h3 元素的背景设置为黑色，但我没有。
我认为如果您提供您的代码，我们会更好地帮助您。不管怎样，我有下面的代码，在图像上有一个 h3 文本。您可以看看这是否对您有帮助：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Over Image</title>
<style>
/* Set the background color of the webpage to black */
body {
background-color: black;
margin: 0; /* Remove default margin */
padding: 0; /* Remove default padding */
}
/* CSS to set background-color of h3 to transparent */
.container {
position: relative;
width: 400px;
margin: 0 auto; /* Center the container horizontally */
}
svg {
max-width: 100%;
height: auto;
display: block; /* Remove extra space below the image */
}
/* CSS to style the text overlay */
.text-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.5);
color: white;
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<svg width="400" height="110">
<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
You can replace the 'svg' tag with your 'img' tag
</svg>
<div class="text-overlay">
<h3>Text Over Image</h3>
</div>
</div>
</body>
</html>