css - 减轻另一个类(class)的背景颜色

Question

我们可以在没有颜色值的情况下使用 lighten、Darken CSS 属性吗？

我有一个带有背景颜色的类例如:

.master{
      background-color:green;
}

---

<div class="master">Master</div>

我必须使用不同的 CSS 类来照亮“Div”的背景。我怎样才能做到这一点？

注意:

1. 我有几个主题和预定义的背景颜色，所以我必须使用这些颜色并使用不同的类来设置阴影

2. 不透明度不是我想要的。

Answer 1

你可以考虑一个伪元素来创建另一个层并继承 background-color 然后你可以毫无问题地应用过滤器:

.master{
      background-color:green;
}
.master2{
      background-color:red;
}

.light,
.dark{
  position:relative;
  z-index:0;
}
.light:before,
.dark:before{
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color:inherit;
  filter:brightness(200%);
}
.dark:before {
  filter:brightness(50%);
}

<div class="master light">Master</div>
<div class="master2 light">Master</div>
<div class="master dark">Master</div>
<div class="master2 dark">Master</div>