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

Question

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

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

通常我会用

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

但是，如果我没有单个 red/blue/green 值，只有组合的十六进制 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

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

Semi-transparent background color in CSS from hex RGB value

css

transparency

sass

opacity

background-color