介绍
opacity是一个 CSS 属性，允许您更改元素的不透明度。默认情况下，所有元素的值为1。通过将此值更改为更接近0，元素将显得越来越透明。
一个常见的用例是使用图像作为背景的一部分。调整不透明度可以提高文本的易读性或达到所需的外观。但是，有没有办法为目标的background-image同一个元素opacity，而不会影响子元素。
在本文中，您将看到两种方法来解决不透明背景图像的此限制。
先决条件
如果你想跟随这篇文章，你需要：
方法 1 — 使用单独的图像元素和定位
第一种方法将依赖于两个要素。一个是“包装”，它提供了一个参考点position: relative。第二个是img出现在内容后面的元素，具有position: absolute堆叠上下文。
以下是此方法的标记示例：
<div class="demo-wrap">
<img
class="demo-bg"
src="https://assets.digitalocean.com/labs/images/community_bg.png"
alt=""
>
<div class="demo-content">
<h1>Hello World!</h1>
</div>
</div>
这是随附的样式：
.demo-wrap {
overflow: hidden;
position: relative;
}
.demo-bg {
opacity: 0.6;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: auto;
}
.demo-content {
position: relative;
}
此标记和样式将生成在图像顶部带有文本的结果：
你好，世界！
父级demo-wrap <div>建立一个绝对定位的包含块。将demo-bg <img>被设置为position: absolute和分配轻微opacity。将demo-content <div>被设置为position: relative，并且由于标记是如何安排它比更高的堆叠内容demo-bg。也可以z-index用于更好地控制堆叠上下文。
这种方法有一些限制。它假设您的图像足够大以容纳任何元素的大小。您可能需要强制执行大小限制，以防止图像被截断或未覆盖元素的整个高度。如果您想控制“背景位置”并且没有干净的“背景重复”替代方案，它还需要额外的调整。
方法 2 — 使用 CSS 伪元素
第二种方法将依赖于伪元素。在:before和:after伪元素可用于大多数元素。通常，您会提供一个content值并使用它在开头或结尾附加额外的文本。但是，也可以提供一个空字符串，然后您可以将伪元素用于设计。
以下是此方法的标记示例：
<div class="demo-wrap">
<div class="demo-content">
<h1>Hello World!</h1>
</div>
</div>
这是随附的样式：
.demo-wrap {
position: relative;
}
.demo-wrap:before {
content: ' ';
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0.6;
background-image: url('https://assets.digitalocean.com/labs/images/community_bg.png');
background-repeat: no-repeat;
background-position: 50% 0;
background-size: cover;
}
.demo-content {
position: relative;
}
此标记和样式将生成在图像顶部带有文本的结果：
你好，世界！
父级demo-wrap <div>建立一个绝对定位的包含块。伪元素:before设置为position: absolute，分配一个轻微的opacity，并用于background-size: cover占用所有可用空间。
这种方法具有的其他支持优势background样特性background-position，background-repeat和background-size。这种方法的缺点是使用其中一个伪元素可能与另一种设计效果（如清除修复解决方案）相冲突。
结论
在本文中，您了解了两种解决不透明度背景图像限制的方法。
如果您想了解有关 CSS 的更多信息，请查看我们的 CSS 主题页面以获取练习和编程项目。
