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

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

使用减轻SASS 功能

lighten($color, 20%)

如果要更改颜色的 alfa，请使用rgba 功能

rgba($color,0.8)

看演示