如何更改 CSS 背景图片的不透明度-Toy模板网

这篇具有很好参考价值的文章主要介绍了如何更改 CSS 背景图片的不透明度。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

介绍

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

一个常见的用例是将图像作为背景的一部分。调整不透明度可以提高文本的可读性或实现所需的外观。然而，目前没有办法只针对元素的 background-image 使用 opacity 而不影响子元素。

在本文中，我们将介绍两种方法来解决具有不透明度的背景图像的限制。

先决条件

如果你想要跟随本文，你需要：

熟悉 opacity。
熟悉 position: relative 和 position: absolute。
熟悉堆叠上下文和 z-index。
熟悉 :before 和 :after 伪元素。

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

第一种方法依赖于两个元素。一个是提供了 position: relative 参考点的 “wrap”。第二个是一个出现在内容后面的 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 更精细地控制堆叠上下文。

这种方法有一些局限性。它假设你的图像足够大，以适应任何元素的大小。你可能需要强制施加大小限制，以防止图像出现被截断或不覆盖元素的整个高度。如果你想要控制 “背景位置” 并且没有干净的 “背景重复” 替代方案，它还需要额外的调整。

方法二 —— 使用 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;
}