如何在不影响子元素或文本内容的情况下更改元素背景的不透明度
主题：HTML / CSS上一页|下一页
答案：使用 CSS RGBA 颜色
没有像"background-opacity"这样的 CSS 属性，您只能使用它来更改元素背景的不透明度或透明度，而不会影响其子元素。 另一方面，如果您尝试使用 CSS opacity 属性执行此操作，它不仅会更改背景的不透明度，还会更改所有子元素的不透明度。
在这种情况下，您可以使用 CSS3 中引入的 RGBA 颜色，其中包含 alpha 透明度作为颜色值的一部分。 使用 RGBA 颜色，您可以设置背景颜色及其透明度，如下例所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Opacity Using RGBA Colors</title>
<style>
body {
background-image: url("images/pattern.jpg");
}
p {
padding: 20px;
background: rgba(0, 0, 0, 0.6);
color: #fff;
font: 18px Arial, sans-serif;
}
</style>
</head>
<body>
<p>Setting background transparency without affecting the text content.</p>
</body>
</html>或者，您可以使用透明的 PNG 图像来实现此效果。 查看 CSS 不透明度上的教程，了解有关在透明框中设置文本的更多信息。
FAQ 相关问题解答
以下是与此主题相关的更多常见问题解答：
Advertisements