减轻另一个类的背景颜色答案

【问题标题】：lighten the background colour from another class减轻另一个类的背景颜色
【发布时间】：2018-08-10 05:06:38
【问题描述】：

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

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

.master{
      background-color:green;
}

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

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

注意：

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

【问题讨论】：

欢迎来到 SO，请将您的代码添加到 sn-p，以便有人快速解决您的问题。祝你有美好的一天！
你可以使用 SCSS 吗？
@Arkellys 我在我的项目中使用 LESS
@RaashidA。好的，您是否尝试过使用lighten() 功能？我唯一能想到的就知道了。
@Arkellys 是的，这对我的问题没有帮助:(

标签： css colors background

【解决方案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>

【讨论】：

谢谢你帮助我解决了我的问题:)

【解决方案2】：

您可以使用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>

【讨论】：

过滤器应用于图层顶部的整个 div，其均值过滤应用于内容以及不透明度。我只需要减少背景颜色。

【解决方案3】：

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

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

【讨论】：

当你有 0 值时，它会带入黑色，在我的情况下，我不能在第二类中使用颜色值。我只需要减轻通过另一个类应用的背景颜色。

【解决方案4】：

这可能会对您有所帮助，我认为这是实现您目标的唯一方法。如您所见，两张图片相同，没有对内容应用过滤器。

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

【讨论】：

过滤器不符合我的要求它过滤了div内的全部内容我只需要减少背景颜色变亮或变暗。