CSS中的半透明背景颜色来自十六进制RGB值

Question

背景：我必须使用提供一些集成 SASS 功能的 CMS：用户可以定义颜色，它们以十六进制值的形式提供给我可以编辑的 SCSS 文件。

问题：我必须使用其中一种颜色的浅色版本作为 div 的背景。 （在具有一定透明度的背景颜色的意义上更亮）。

通常我会这样做

background-color: rgba(r,g,b,a);

但是，如果我没有单一的红色/蓝色/绿色值，而只有组合的十六进制 RGB 值，该怎么办？

应达到的结果示例：

/* user color comes as a variable containing a hex value
   variable: $color
   example value: 00d;
*/

h1{
   background-color: #00d;  /* $color resolves to 00d */ 
}

p{
   background-color: #7e7eed; /* <- this value should be calculated from the variable $color, in this case #00d + opacity 50% */
}

<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

Answer 1

使用lightenSASS函数

lighten($color, 20%)

如果你想改变你的颜色，使用rgba function

rgba($color,0.8)

见demo