介绍

opacity 是一个 CSS 属性，允许您更改元素的不透明度。默认情况下，所有元素的值为 1。通过将此值更改为更接近 0，元素将显得越来越透明。

一个常见的用例是使用图像作为背景的一部分。调整不透明度可以提高文本的易读性或达到所需的外观。但是，没有办法在不影响子元素的情况下使用 opacity 来定位元素的 background-image。

在本文中，您将看到两种方法来解决具有不透明度的背景图像的这一限制。

先决条件

如果您想继续阅读本文，您将需要：

方法 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。这种方法的缺点是使用了可能与另一种设计效果冲突的伪元素之一 - 例如 clearfix 解决方案。

结论

在本文中，您了解了两种解决不透明度背景图像限制的方法。

如果您想了解有关 CSS 的更多信息，请查看我们的 CSS 主题页面以获取练习和编程项目。

如何更改CSS背景图像的不透明度

目录

介绍

先决条件

方法 1 — 使用单独的图像元素和定位

你好世界！

方法 2 — 使用 CSS 伪元素

你好世界！

结论