Question

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

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

.master{
      background-color:green;
}

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

我必须使用另一个CSS 类来简化“ Div”的背景。我怎样才能做到这一点？

注意：

我有一些主题和预定义的背景颜色，所以我必须使用这些颜色并使用不同的类来对其进行阴影
不透明度不是我想要的。

Answer 1

这可能会对您有所帮助，我认为这是实现目标的唯一途径。如您所见，这两个图像是相同的，没有对内容应用任何过滤器。

.master{
color:#fff;
position:absolute;
top:10px; 
left:10px;
}

.mmaster{
-webkit-filter: brightness(200%);
 background:green;  
 position:relative; 
 padding:80px 0;
 }

<div class="mmaster"></div>
<div class="master"><img src="https://www.w3schools.com/css/bgdesert.jpg" alt="desert">Desert</div>
<img src="https://www.w3schools.com/css/bgdesert.jpg">

Answer 2

您可以考虑使用伪元素来创建另一个图层并继承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>

Answer 3

您可以使用filter CSS属性来调整亮度，如下所示：

.master {
  background-color: green;
}

.lighten {
  filter: brightness(150%);
}

.darken {
  filter: brightness(50%);
}

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

Answer 4

我认为添加一个不同的类非常容易，以便可以减轻div元素的背景。试试这个例子，

.master-light{
    background-color:rgba(0,0,0,0.5); /*where 0.5 stands for 50% opacity*/
}

减轻另一类的背景色

4 个答案: