css:使颜色像不透明度一样变浅，但不透明

Question

我有一个具有特定颜色的divbackground-color: '#e86969';

我想让它的颜色，好像它有不透明性，但不让它"透明"。

我尝试过，使用chrome"inspect"窗口，看到我可以在末尾添加2位数字，但它也让它看到了thgouh:background-color: '#e86969d0'

如何在没有不透明度的情况下使颜色亮20%？

Answer 1

如果将原始十六进制代码转换为hsl，则可以调整函数的亮度部分。

background-color: hsl(0deg 73% 66%);
~~~

之前

.test {
padding: 1rem;
width: 1rem;
height: 1rem;
background-color: hsl(0deg 73% 66%);
}

<div class="test"></div>

之后

.test {
padding: 1rem;
width: 1rem;
height: 1rem;
background-color: hsl(0deg 73% 76%);
}

<div class="test"></div>

Answer 2

您可以使用其他着色解决方案，如HSL系统。在您的情况下，#e86969可以是hsl(0，73%，66%(。hsl((函数的第三个参数是亮度。

.my-div-with-hsl{
background-color: hsl(0, 73%, 66%);
}

更多信息：

• https://www.w3schools.com/colors/colors_hsl.asp

• https://www.peko-step.com/en/tool/hslrgb_en.html