在 CSS 中，透明色和继承色实际上有什么区别？

Question

transparent-- 指定颜色应该是透明的。这是默认值
inherit——从其父元素继承此属性。

但实际上，我看不出它们有什么区别。在以下示例中，两个子元素都将具有coral背景颜色。

<div style="background-color: coral">
  <div style="background-color: transparent">
    transparent
  </div>
  <div style="background-color: inherit">
    inherit
  </div>
</div>

在什么条件下我会得到不同的结果？

Answer 1

当颜色具有透明度时，您可以清楚地看到差异（相关：堆叠的半透明盒子的颜色取决于顺序？）

div {
  padding: 20px;
}

<div style="background-color: rgb(255 127 80 / 50%)">
  <div style="background-color: transparent">
    transparent
  </div>
  <div style="background-color: inherit">
    inherit
  </div>
</div>