继承颜色但覆盖不透明度/透明度 [英] Inherit color but override opacity/transparency

问题描述

是否可以继承颜色但覆盖不透明度值?这是 pseudo CSS中的示例:

Is it possible to inherit the color but override the opacity value? Here's an example in pseudo CSS:

.color-class {
    background-color: rgba(255, 0, 0, 0);
}

.lighten {
    background-color: rgba(inherit, inherit, inherit, .4);
}

应用于

<div style="color-class">I am red</div>
<div style="color-class lighten">
    I am red and a little bit transparent
</div>

应该导致有色元素，而另一个元素具有相同(继承的)颜色，但增加了透明度.

should result in a colored element and the other one being the same (inherited) color but with added transparency.

我基本上希望拥有一个CSS类，该类可以在不更改颜色值的情况下变亮(或变暗)背景色.

I basically want to have a CSS class that lightens (or darkens) the background color without changing the color value.

推荐答案

一种解决方案是使用伪元素作为背景并简单地控制其不透明度:

A solution is to use pseudo element as background and simply control its opacity :

div {
  padding: 40px;
}

.color-class {
  position: relative;
}

.color-class:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgb(255, 0, 0);
  opacity: 1;
  z-index:-1;
}

.lighten:before {
  opacity: 0.5;
}

<div class="color-class">I am red</div>
<div class="color-class lighten">
  I am red and a little bit transparent
</div>

这篇关于继承颜色但覆盖不透明度/透明度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！