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

使用lighten SASS功能

lighten($color, 20%)

如果您想更改颜色的alfa，请使用rgba function

rgba($color,0.8)

请参阅demo

Answer 2

修改＆＃34;不透明度＆＃34;你的CSS的css属性。值0表示完全透明，值1表示完全不透明，值.5表示半透明等。较小的不透明度值将使您的颜色变得更亮＆＃34;。任何介于0和1之间的值都可以。这与你的rgba（a == alpha）中的alpha值基本相同。

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

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

2 个答案: