来自十六进制 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)

观看演示

Answer 2

修改CSS的“不透明度” css属性。 值0表示完全透明，值1表示完全不透明，值0.5表示一半透明，依此类推。较小的不透明度值会使您的颜色“更浅”。 0到1之间的任何值都可以。 这基本上与您的rgba中的alpha值相同（a == alpha）。

参考： http : //www.w3schools.com/css/css_image_transparency.asp