opacity

<alpha-value>

介于 0.0 到 1.0（含）之间的<number>，或介于 0% 到 100%（含）之间的<percentage>，表示通道的不透明度（即其 alpha 通道的值）。虽然任何超出此范围的值都是有效的，但会被限制在该范围内的最接近的极限值。

值	含义
0	元素完全透明（即不可见）。
任何严格介于 0 和 1 之间的<number>	元素是半透明的（即可以看到元素后面的内容）。
1（默认值）	元素完全不透明（视觉上是实心的）。

opacity 应用于整个元素，包括其内容，即使子元素不会继承该值。因此，元素及其子元素相对于元素的背景都具有相同的不透明度，即使它们彼此之间具有不同的不透明度。

要仅更改背景的不透明度，请使用允许 alpha 通道的颜色值的background属性。例如

background: rgb(0 0 0 / 40%);

当opacity的值设置为0时，元素及其所有子元素看起来不可见，但它们仍然是DOM的一部分。这意味着它们仍然会注册指针事件，并且如果元素处于选项卡顺序中，它们确实会获得焦点。为了获得良好的可用性，请确保在这些元素收到用户交互时使其可见，或者使用CSS pointer-events属性禁用指针事件，并通过使用disabled属性禁用或设置tab-index="-1"（用于非表单相关的交互式元素）将其从选项卡顺序中移除。

使用opacity且其值为非1的值会将元素置于新的堆叠上下文中。

不应单独使用不透明度来向屏幕阅读器提供信息。请使用HTML hidden属性、CSS visibility或CSS display样式属性。最好避免使用aria-hidden属性，但如果元素使用不透明度隐藏，则也应将其隐藏在屏幕阅读器之外。

当您在将元素添加到页面时过渡元素的不透明度，而内容之前使用visibility: hidden、display: none或content-visibility: hidden隐藏时，您需要同时包含@starting-style和transition-behaviour: allow-discrete

.card {
  transition:
    opacity 5s,
    display 5s;
  background-color: orange;

  transition-behavior: allow-discrete;
  @starting-style {
    opacity: 0;
  }
}

.card.hidden {
  display: none;
  opacity: 0;
}

要启用首样式过渡，需要@starting-style规则。在上面的代码中，在@starting-style中设置opacity: 0为过渡提供了起点，当元素接收其初始样式更新时。有关更多详细信息，请参阅@starting-style。

需要设置transition-behavior: allow-discrete才能过渡到display: none。有关更多详细信息，请参阅transition-behavior属性。

如果调整文本的不透明度，务必确保文本颜色与其放置在其上的背景之间的对比度足够高，以便视力较差的人能够阅读页面内容。

颜色对比度是通过比较经过不透明度调整的文本和背景颜色值的亮度来确定的。为了满足当前的Web内容可访问性指南 (WCAG)，文本内容需要 4.5:1 的比率，标题等较大的文本需要 3:1 的比率。大文本定义为 18.66px 及其粗体或更大，或 24px 或更大。

• WebAIM：颜色对比度检查器
• MDN 理解 WCAG，指南 1.4 说明
• 理解成功标准 1.4.3 | W3C 理解 WCAG 2.0

各种操作系统提供了降低透明度的偏好设置。要根据用户的操作系统透明度偏好设置opacity，请使用prefers-reduced-transparency媒体查询。

opacity = 
  <opacity-value>  

<opacity-value> = 
  <number>      |
  <percentage>  

以下示例演示了opacity属性如何更改整个元素和内容的不透明度，从而使文本非常难以阅读。

HTML

<div class="light">You can barely see this.</div>
<div class="medium">This is easier to see.</div>
<div class="heavy">This is very easy to see.</div>

CSS

div {
  background-color: yellow;
  font-weight: bold;
  font-size: 130%;
}
.light {
  opacity: 0.2; /* Barely see the text over the background */
}
.medium {
  opacity: 0.5; /* See the text more clearly over the background */
}
.heavy {
  opacity: 0.9; /* See the text very clearly over the background */
}

结果

在以下示例中，不透明度在悬停时发生变化，因此父元素上的条纹背景图像会显示在图像中。

HTML

<div class="wrapper">
  <img
    src="//interactive-examples.mdn.mozilla.net/media/dino.svg"
    alt="MDN Dino"
    width="128"
    height="146"
    class="opacity" />
</div>

CSS

img.opacity {
  opacity: 1;
}

img.opacity:hover {
  opacity: 0.5;
}

.wrapper {
  width: 200px;
  height: 160px;
  background-color: #f03cc3;
  background-image: linear-gradient(
    90deg,
    transparent 50%,
    rgb(255 255 255 / 50%) 50%
  );
  background-size: 20px 20px;
}

结果

要根据用户的操作系统透明度偏好设置元素的样式，请使用prefers-reduced-transparency媒体查询。以下示例演示了如何使用prefers-color-scheme媒体查询根据用户的偏好指定所需的不透明度。

.element {
  opacity: 0.5;
}

@media (prefers-reduced-transparency) {
  .element {
    opacity: 1;
  }
}

• prefers-reduced-transparency媒体查询
• CSS 颜色模块