Question

在不知道的情况下，是否有更少的方法或（css3一般）访问父{æ{}}？

类似的东西：

background-color

变量较小的变量是明显的方法，但在这种情况下，我根本不知道父变量.child-class { background-color: lighten(parent-background-color, 30%); }，因为它可以动态设置样式。

有人在她的技巧框中找到了帮助吗？

Answer 1

你可以达到效果

技术上答案是＆＃34;否＆＃34;是正确的。但是，因为我们正在谈论＆＃34;闪电＆＃34; （或者＆＃34;变暗＆＃34;），即添加白色或黑色，然后仍然可以通过伪元素上的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 2

编辑：看看ScottS的答案，找出一个可能你需要的聪明解决方案。

纯css无法做到这一点。原因是这些类型的引用可能导致“循环”情况。或者必须多次循环DOM以确定最终值的情况。这两种情况都是css总能避免的。

现在，如果您的主要目标是定义各种各样的“调色板”并让所有颜色协同工作，那么您应该查看“SASS”或“LESS”等CSS扩展工具。他们可以让你定义颜色并改变它们并做其他有用的比较。如果您想要这样的灵活性，请查看这些工具。然而，他们不能像你要求的那样进行直接比较，因为他们最终会减少到css。

这可以使用JavaScript轻松完成，甚至可以更轻松地使用jQuery。当它可能不是你需要的时候，我不会用JavaScript / jQuery代码弄乱这个答案。

Answer 3

使用新的backdrop-filter属性实际上是有可能的，但是目前对浏览器的支持不是很好。

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

就目前而言，我仍然会坚持使用白色/黑色Alpha背景颜色，该颜色非常适合灰度背景。

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

3 个答案:

你可以达到效果

See an example fiddle showing both options