改变颜色的深浅，参考原来的那个

Question

<style>
    div.red {
        border-left: 5px solid rgb(255, 96, 92);
        margin: auto;
        padding: 0.5em 1em;
        width: 95%;
    }
</style>

<div class="red">
    <p>Aaa aaa aaa aaa aaa</p>

    <div class="red">
        <p>Aaa aaa aaa aaa aaa</p>
    </div>
</div>

我有一个基色 (rgb(255, 96, 92))，我需要将它合并到 div 的样式中，作为背景。

div 的背景应该比底色浅一些，类似于

div.red {
    rgba(255, 96, 92, 0.25);
}

但是，我不能使用

background: {rgba(255, 96, 92, 0.25);}

直接，因为它改变了嵌套div的背景颜色。

不透明度也不合适，因为它会改变文本的颜色。

div.red {
    background: rgb(255, 96, 92);
    opacity: 0.25;
}

过滤器不适合与不透明度相同的原因：它们会影响文本。

我知道的另一个选项是 HUE 颜色模型。它不适合，因为我需要保留对基色的引用。

rgb(255, 96, 92) 与hsl(1, 100%, 68%) 相同。我可以将 68 更改为 93，它会提供所需的视觉效果。但是现在我不能说，查看我的代码，哪个颜色是基色。

div.red {
    background: hsl(1, 100%, 93%);
}

我正在寻找的最好方法是

div.red {
    background: rgba(255, 96, 92, 0.25);
    background-alpha-channel: separate; /* separate or merge,
                                           depending of what you need. */
}

Answer 1

使用伪元素作为背景层并在那里应用过滤器：

div.red {
  border-left: 5px solid rgb(255, 96, 92);
  margin: auto;
  padding: 0.5em 1em;
  width: 95%;
  position: relative;
  z-index: 0;
}

.red:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background: rgba(255, 96, 92);
  filter: brightness(2);
}

<div class="red">
  <p>Aaa aaa aaa aaa aaa</p>

  <div class="red">
    <p>Aaa aaa aaa aaa aaa</p>
  </div>
</div>

另一个想法是考虑两个背景层，其中最上面的一个是具有 alpha 的白色。添加更多的白色会使颜色更亮。

div.red {
  border-left: 5px solid rgb(255, 96, 92);
  margin: auto;
  padding: 0.5em 1em;
  width: 95%;
  background: 
    linear-gradient(rgba(255,255,255,0.5),rgba(255,255,255,0.5)),
    rgba(255, 96, 92)
}

<div class="red">
  <p>Aaa aaa aaa aaa aaa</p>

  <div class="red">
    <p>Aaa aaa aaa aaa aaa</p>
  </div>
</div>