我知道你能写…
background-color: #ff0000;
．.． 如果你想要红色的东西。
你可以写…
background-color: rgba(255, 0, 0, 0.5);
．.． 如果你想要红色半透明的。
有没有简单的十六进制表示部分透明颜色的方法?我想要这样的东西:
background-color: #ff000088; <--- the 88 is the alpha
．.． 还是……
background-color: #ff0000 50%;
我得到的所有颜色都是十六进制的，而必须将它们全部转换为0-255的十进制刻度，这很烦人。
当前回答
恐怕不行。你知道的rgba格式是唯一的。
其他回答
请看这里http://www.w3.org/TR/css3-color/#rgba-color
这是不可能的，很可能是因为0xFFFFFFFF大于32位整数的最大值
如果你所有的颜色都在HEX变量中，你可以使用下面的SCSS代码:
首先，将这个映射从rgba - opacity值复制到十六进制代码:
$opacity-to-hex: (
0: '00',
0.05: '0C',
0.1: '19',
0.15: '26',
0.2: '33',
0.25: '3F',
0.3: '4C',
0.35: '59',
0.4: '66',
0.45: '72',
0.5: '7F',
0.55: '8C',
0.6: '99',
0.65: 'A5',
0.7: 'B2',
0.75: 'BF',
0.8: 'CC',
0.85: 'D8',
0.9: 'E5',
0.95: 'F2',
1: 'FF'
)
然后复制下面使用映射的mixin:
@mixin color-opacity($property, $color, $opacity) {
#{$property}: unquote($color + map-get($opacity-to-hex, $opacity));
}
最后但并非最不重要的是，你可以在所有颜色属性上使用这个mixin和映射的不透明度，例如:
@include color-opacity('background-color', $your_hex_color, 0.8);
@include color-opacity('color', $your_hex_color, 0.5);
恐怕不行。你知道的rgba格式是唯一的。
我在对问题进行增强后找到了答案。对不起!
Excel帮了大忙!
只需在十六进制颜色值前添加十六进制前缀，就可以添加一个透明度与%值相同的alpha。
(在rbga中，不透明度百分比是用上面提到的十进制表示的)
Opacity % 255 Step 2 digit HEX prefix
0% 0.00 00
5% 12.75 0C
10% 25.50 19
15% 38.25 26
20% 51.00 33
25% 63.75 3F
30% 76.50 4C
35% 89.25 59
40% 102.00 66
45% 114.75 72
50% 127.50 7F
55% 140.25 8C
60% 153.00 99
65% 165.75 A5
70% 178.50 B2
75% 191.25 BF
80% 204.00 CC
85% 216.75 D8
90% 229.50 E5
95% 242.25 F2
100% 255.00 FF
如果你可以使用LESS，有一个渐隐功能。
@my-opaque-color: #a438ab;
@my-semitransparent-color: fade(@my-opaque-color, 50%);
background-color:linear-gradient(to right,@my-opaque-color, @my-semitransparent-color);
// result:
background-color: linear-gradient(to right, #a438ab, rgba(164, 56, 171, 0.5));
