html - background-color : transparent mean? 是什么意思

Question

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

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

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

Answer 1

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

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

同时请记住，它是 background-color property 的初始值.也就是说，如果您没有明确指定背景颜色，它将采用值 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>