减轻孩子的父母（未知）背景颜色

Question

是否有一种方法可以使父对象的background-color更少或（通常为css3）而不知道？

类似：

.child-class {
    background-color: lighten(parent-background-color, 30%);
}

较小的变量将是显而易见的方法，但在这种情况下，我根本不知道父级的background-color，因为它可以动态设置样式。

有人在她的花样盒子里有东西可以帮忙吗？

Answer 1

编辑：看看ScottS给出的可能是您所需要的聪明解决方案的答案。

无法在纯CSS中完成。原因是这些类型的引用可能导致“循环”情况。或者在DOM必须多次循环以确定最终值的情况下。这两种情况都是css始终避免的。

现在，如果您的主要目标是定义各种“调色板”并使所有颜色一起使用，则应使用CSS扩展工具，例如“ SASS”或“ LESS”。它们可以让您定义颜色并进行更改并进行其他有用的比较。如果您想要这样的灵活性，请看看这些工具。但是，它们不能像您要求的那样进行直接比较，因为它们最终只会减少到CSS。

这可以使用JavaScript轻松完成，甚至可以使用jQuery轻松完成。当您可能不需要JavaScript / jQuery代码时，我不会用JavaScript / jQuery代码弄乱这个答案。

Answer 2

您可以实现效果

技术上回答“否”是正确的。但是，由于我们在谈论“变亮”（或“变暗”），即添加白色或黑色，因此仍然可以通过在伪元素上使用css3 rgba()颜色或opacity来实现效果。考虑这些（每个都将在子元素上使用）：

选项＃1：CSS3 rgba

.lighten {
    background-color: rgba(255, 255, 255, 0.3);
}

选项＃2：具有不透明度的CSS2伪元素

.lighten{
    position: relative;
    z-index: 0;
}

.lighten:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background-color: #fff;
    opacity: 0.3;
}

See an example fiddle showing both options

Answer 3

实际上可以通过新的backdrop-filter属性来实现，但是目前对浏览器的支持不是很好。

.child {
  backdrop-filter: brightness(1.5);
}

目前，我仍然会坚持使用白色/黑色Alpha背景色，这对于灰度背景来说效果很好。