如何使透明文本忽略其父 div 背景颜色？答案

【问题标题】：How to make a transparent text ignore its parent div background-color?如何使透明文本忽略其父 div 背景颜色？
【发布时间】：2021-12-30 12:17:49
【问题描述】：

我有一个带有背景颜色的容器 div，容器内有一个“按钮”div - 具有不同的背景颜色 - 以及“按钮”div 内的一个文本。

我的问题是：是否有可能使文本“继承”容器颜色，即使文本不是容器的孩子？

请只提供可能的解决方案，而不必求助于 JS。

CSS：

.container{
  background-color: red;
}

.button{
background-color: white;
}

HTML：

<div class="container">
  <div class="button">
   <a href="#">THE TEXT</a>
  </div>
</div>

给定的 CSS 和 HTML 只是我实际问题的一个示例，其中包含很多“按钮”和“容器”。

【问题讨论】：

使用 CSS 变量定义颜色？
@isherwood 我做到了。但由于我有很多 div，背景颜色不同，它会为每个容器中的每个按钮创建太多变量。我的目标是让我的 CSS 更简洁，并通过可能的单一或接近它的更改。

标签： html css containers background-color

【解决方案1】：

一种方法是在容器中定义一个 CSS 变量，并使用它来设置容器背景颜色和锚元素的文本颜色。

这是可行的，因为从某种意义上说，孩子将“继承” CSS 变量（属性）的设置。

.container {
  --color: red;
  background-color: var(--color);
  display: inline-block;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
}

.button {
  background-color: white;
}

.button a {
  color: var(--color);
}

<div class="container">
  <div class="button">
    <a href="#">THE TEXT</a>
  </div>
</div>

注意，在这个 sn-p 中，容器已经被赋予了一些样式，所以我们可以看到它。

【讨论】：