一尘不染

减轻孩子的父母(未知)背景色

css

是否有一种方法可以在background-color不知情的情况下(或通常在CSS3中)访问父级?

就像是:

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

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

有人在她的把戏盒子里帮忙吗?


阅读 218

收藏
2020-05-16

共1个答案

一尘不染

编辑:看看ScottS的答案吧,这可能是您需要的一个聪明的解决方案。

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

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

使用JavaScript可以轻松完成此操作,而使用jQuery则更轻松。当您可能不需要的时候,我不会用JavaScript /
jQuery代码弄乱这个答案。

2020-05-16