减轻另一类的背景色 [英] lighten the background colour from another class

问题描述

我们可以使用不带颜色值的变亮，变暗CSS属性吗?

Can we use lighten, Darken CSS attributes without colour value?

我有一堂课的背景色例如:

I have a class with the background colour Ex:

.master{
      background-color:green;
}

---

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

我必须使用另一个CSS 类来简化"Div"的背景.我怎样才能做到这一点?

I have to lighten the background of the "Div" using a different CSS class. How can I do that?

注意:

1. 我有一些主题和预定义的背景颜色，所以我必须使用这些颜色并使用不同的类来对其进行阴影

1. I have a few themes and predefined background colours so I have to use those colours and have a shade of it using a different class

不透明度不是我想要的.

Opacity is not what I'm looking for.

推荐答案

您可以考虑使用伪元素来创建另一个图层并继承 background-color ，然后可以应用滤镜而没有任何问题:

You can consider a pseudo element to create another layer and inherit the background-color then you can apply filter without any issue:

.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>

这篇关于减轻另一类的背景色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！