background-color:透明是什么意思？

Question

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

我不知道它是什么，所以我在网上搜索，但我找不到任何资源来解释它的意思。

background-color: transparent的含义和/或功能是什么？

Answer 1

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

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

这意味着，如果您不显式指定背景色，它将采用值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;