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

Question

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

我不知道它是什么，所以我在互联网上搜索了一下，但是没有找到解释它的资源。 background-color: transparent 是什么意思或者作用是什么？

- AmirM

---

默认情况下，背景颜色是透明的，基本上意味着没有背景颜色。 - Robert Harvey

你的意思是说你不理解“背景颜色”和/或“透明”的含义吗？因为如果你知道这两个事物的含义，那么这似乎就很容易理解了。但如果你不知道，那么可以理解为什么很少有资料来解释它们（除了罗伯特提到的那个）。 - BoltClock

Answer 1

正如其名称所示，background-color: transparent 表示您可以透过元素的背景看到其后面的内容，即其背景颜色会与父元素上看到的背景颜色相同。

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

还要记住，这是background-color属性的初始值。也就是说，如果您没有显式地指定 background-color，它将采用值 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>

- Nisarg Shah

---

“透明”并不意味着与其父元素相同的背景颜色。具有透明背景颜色的元素没有背景颜色 - 您可以“透过”它看到其父元素的背景，但它本身没有获取或继承该颜色。这就像玻璃；如果您将一片玻璃放在红墙前面，玻璃不会变成红色；您只是透过玻璃看到了红墙。 - BoltClock

@BoltClock 是的，我觉得用语言表达有点困难。我试着在规范中找到措辞，但没找到任何东西，可能是因为大多数英语使用者都理解 "transparent" 的含义。我已经尝试修改措辞，但请随意更新它。 - Nisarg Shah

这也是我所思考的。从问题中并不清楚MDN和W3Schools（我在这里引用也没有问题）为何不足，因此我一直在努力弄清楚具体在问什么。请参见我对问题的评论。 - BoltClock

Answer 2

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

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

- Emre BOSTAN

Answer 3

如果您使用background-color:transparent，这意味着您不想为此元素设置background-color。一个典型的用例是：如果您重叠了另一个元素并希望看到底层元素及其内容或颜色。

- ochs.tobi