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

Question

有没有办法在较少或(一般来说是css3)访问父母background-color而不知道它？

就像是:

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

变量越少是显而易见的方法,但在这种情况下,我根本不知道父变量,background-color因为它可以动态设置样式.

有没有人在她的技巧框中得到帮助？

Answer 1

你可以达到效果

从技术上讲,答案"不"是正确的.但是,因为我们在谈论"闪电"(或"变暗"),即添加白色或黑色,所以仍然可以通过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;
}

查看显示两个选项的示例小提琴

Answer 2

编辑：看看 ScottS 的答案，寻找可能正是您需要的聪明的解决方案。

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

现在，如果您的主要目标是定义某种“调色板”并使所有颜色一起工作，那么您应该考虑 CSS 扩展工具，例如“SASS”或“LESS”。它们可以让您定义颜色并更改它们以及执行其他有用的比较操作。如果您想要这种灵活性，请看看这些工具。然而，他们不能像你要求的那样进行直接比较，因为它们最终只是简化为 css 。

使用 JavaScript 可以轻松完成此操作，使用 jQuery 则更容易。当 JavaScript/jQuery 代码可能不是您所需要的时，我不会用 JavaScript/jQuery 代码来混淆这个答案。