继承颜色并使其变得更深/更亮

Question

我有两个div，一个是.father，另一个是.child——如下所示：

<div class="father">
  <p></p>
</div>

<div class="child">
  <p></p>
</div>

正如你所看到的，孩子不在父亲里面（如果这样看起来有些奇怪，请原谅，这是我能想到的唯一的例子）。我的目的是当我给.father设置背景颜色时，比如“background-color: #000”，我希望子元素可以继承黑色但是让它变得更亮/更暗...

我尝试了以下方法：

.child {
  background-color: -20%;
}

我不知道这是否是一种真正的方法，我想这很愚蠢 - 但我需要分享一下我所做的事情。我也尝试使用CSS透明度来实现，但那将应用于整个div...如果div内部有文本怎么办？

例如，我用另一个div包裹div .child，并给该div一个黑色背景，然后对div .child应用透明度 - 但这也会使文本透明！

如果我在span中添加了一个div，如何使该span继承其内部div的颜色和大小？

- Leo

---

这将会很困难，而且像这样比较颜色比你想象的要难得多。你应该考虑重新思考一下，直接硬编码颜色。 - adeneo

考虑使用预处理器，例如LESS。这样就变得容易了。 - Curtis

这个有效吗？https://dev59.com/PXI-5IYBdhLWcg3w483k#13722836 - Jongware

我正在寻找类似的东西，但是针对文本颜色。使链接（a标签）比文本略暗一些。 - BlueCacti

在代码的生命周期后期，使用父子关系可能会让程序员和编辑混淆，因此应该避免使用标签。使用颜色是可以的，并且可以通过，以便值相同。然而，在JavaScript中，很可能有一种方法 - 请记住RGB实际上是需要调整的三个值。 - alexmac

Answer 1

你可以为子元素设置和父元素相同的背景颜色，并在其上设置一个半透明的伪元素。

如果伪元素的背景是半透明白色，背景颜色会变浅；如果伪元素是半透明黑色，子元素会变暗。

.father, .child { 
    background-color: red;
}

.child {
    position: relative;
}

.child:after {
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgba(0,0,0,0.2);
}

.child:hover:after {
    background-color: rgba(255,255,255,0.3);
}

在这个例子中，子元素会变成更深的红色，但当鼠标悬停时会变成较浅的红色（如果基础颜色是其他颜色同样适用）。

演示代码

- vals

Answer 2

很抱歉，您不能仅使用CSS来完成此操作。除非您使用rgba颜色使其透明。

然而，在SASS（和LESS）中有一个函数可以使颜色变暗/变亮。请查看这些函数的参考 here。 有关SASS / SCSS的更多信息：http://sass-lang.com/

- vdwijngaert