css：使颜色变浅，如不透明度，但不透明[重复]

Question

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

我想让它的颜色，就好像它有不透明度一样，但不让它“透视”。

我试过了，使用 chrome 的“检查”窗口，看到我可以在末尾添加 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()函数的第三个参数是lightness。

.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