html - 具有相同颜色但不透明度不同的对象
问题描述
我有一个包含一组信息的对象,包括颜色。我打算将此颜色实现为具有不透明度的背景颜色和文本颜色(没有不透明度,看起来不同)。
有谁知道我可以如何通过对象/变量的颜色来添加不透明度?
.ts
color: string = "green";
name:string = "ABC";
id: number = 1;
.html
<div style="display: flex; flex-direction: column; width: 60%;">
<span [style.background-color]="color" [style.color]="color" class="cc">{{name}}</span>
<span [style.background-color]="color" class="mb" [style.color]="color">{{id}}</span>
</div>
问题
我希望背景颜色具有不透明度,以便文本可见。我打算实现这一点,而不必创建具有“不同”颜色的变量。
解决方案
您可以在应用不透明度的文本和背景之间添加一个额外的图层:
.box {
padding:10px;
display:inline-block;
color:var(--c);
background:var(--c);
position:relative;
z-index:0;
}
.box::before {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
background:rgba(255, 255, 255, 0.5);
}
<div class="box" style="--c:red">some text</div>
<div class="box" style="--c:blue">some text</div>
<div class="box" style="--c:green">some text</div>
没有伪元素的相同想法:
.box {
padding:10px;
display:inline-block;
color:var(--c);
background:var(--c);
background-image:linear-gradient(rgba(255, 255, 255, 0.5),rgba(255, 255, 255, 0.5))!important;
}
<div class="box" style="--c:red">some text</div>
<div class="box" style="color:blue;background:blue;">some text</div>
<div class="box" style="color:green;background-color:green;">some text</div>
推荐阅读
- reactjs - forwardRef 的泛型错误:类型“IntrinsicAttributes”上不存在属性“ref”
- performance - 为什么最后一次“ResultSet.next()”迭代比之前的迭代花费更多的时间?
- javascript - 如何将一系列键替换为使用 javascript 显示的字符串?
- python - 在多条件 IF 语句中,如何仅打印满足条件的值?
- python-3.7 - 如何解决“TypeError:只能将整数标量数组转换为标量索引”的问题
- c - 我们可以为 gcc 上的特定功能添加 `-fcall-used-REG` 吗?
- node.js - 从变量声明一个nodejs const?
- java - 声明一堆相似变量的最少行
- php - 如何在 PHP 中的查询中添加函数
- javascript - 我似乎无法弄清楚如何进行字符串插值;代码排练习