css类减轻背景颜色

Question

我需要一个减轻元素背景颜色的类而不指定类中的颜色。

当我对颜色进行硬编码时，这很容易：

.lighten {
    background-color: lighten(blue, 30%)
} 

但是，如何在不影响内容颜色的情况下对元素的颜色应用亮度？

<div class="blue lighten">
 <div>
    content color should not be affected
 </div>
</div>

https://codepen.io/anon/pen/Ozpzew

Answer 1

你可以这样做：

.lighten {
   filter: brightness(150%);
} 

更改％以满足您的需求