背景色：透明是什么意思？

Question

我已经阅读了一些代码，看到了这个background-color: transparent。

我不知道这是什么，所以我搜索了互联网，但找不到任何资源来解释它的含义。

background-color: transparent是什么意思和/或做什么？

Answer 1

顾名思义，background-color: transparent意味着您可以看到元素的背景，即出现的背景颜色 与其在父元素上看到的背景颜色相同。

请注意，这与background-color: white不同，因为如果父元素的背景颜色不是白色，则给定的元素将具有不同的颜色，即白色。

还要记住，它是background-color property的 initial 值。这意味着，如果您未明确指定背景色，它将采用值transparent。

以下是一个可以给您一个想法的示例：

.container {
  width: 200px;
  border: 1px solid black;
}

.container > div {
  width: 150px;
  margin: 25px;
  border: 1px solid black;
  height: 50px;
}

.bg-blue {
  background-color: aqua;
}

.bg-transparent {
  background-color: transparent;
}

.bg-white {
  background-color: white;
}

.bg-yellow {
  background-color: yellow;
}

<div class="container bg-blue">
  <div class="bg-white">White</div>
  <div class="bg-transparent">Transparent</div>
</div>

<div class="container bg-white">
  <div class="bg-white">White</div>
  <div class="bg-transparent">Transparent</div>
</div>

<div class="container bg-yellow">
  <div class="bg-white">White</div>
  <div class="bg-transparent">Transparent</div>
</div>

Answer 2

如果您使用background-color:transparent，则意味着您不想为此元素添加background-color。一个典型的用例是：如果您要重叠另一个元素，并想查看具有其内容或颜色的基础元素。

Answer 3

背景用于使颜色透明。另外请记住，您可以在“颜色”，“边框”等中使用它。

color:transparent;
border-color:transparent;
background-color:transparent;