减轻另一个类的背景颜色

问题描述

我们可以使用不带颜色值的 lighten、Darken CSS 属性吗?

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

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

I have a class with the background colourEx:

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

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