css - 改变颜色的深浅,参考原来的那个
问题描述
<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. */
}
解决方案
使用伪元素作为背景层并在那里应用过滤器:
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>
推荐阅读
- php - 在 wordpress 中使自定义 html 页面在主题之外工作
- gis - 如何按属性值过滤来自 WMS 服务的数据?
- css - 如何在 Tailwind 中垂直使用 justify-between?
- python - 使用图形界面安装 python 模块
- gitlab-ci - 在 CI 管道上运行 Behave
- ssh - Azure 管道连接到 ssh 服务器,然后将文件复制到其中
- excel - 删除数字旁边的字符,在满足条件时对这些值求和,然后按组获取平均值
- c - 使用 32 位编译器编译的结果与使用 64 位编译器编译的结果不同
- terraform - 如何在terraform中的变量后插入文件名?
- wordpress - 用户角色编辑器:仅显示具有选定状态的角色 WooCommerce 订单