我知道你能写…
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的十进制刻度，这很烦人。
当前回答
如果你所有的颜色都在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);
其他回答
不同颜色的符号是你要学习的。 库尔给你一个更好的机会找到颜色和多种符号。十六进制与RGB, FF = 255和00 = 0没有什么不同，但这就是你所知道的。所以在某种程度上，你必须把它形象化。 我使用Hex, RGBA和RGB。除非需要大量转换，否则手动这样做将帮助您记住一些奇怪的100种颜色及其代码。 要进行大规模转换，请编写一些类似Alarie所给出的脚本。尽情享受色彩的乐趣吧。
在伪元素之后使用an:怎么样?
# myDiv { 位置:相对; 宽度:128 px; 身高:128 px; background - color: # ccc; ｝ # myDiv:{后 内容:”; 位置:绝对的; 左:0; 上图:0; 宽度:100%; 高度:100%; pointer-events:没有; /*给你*/ 保证金:8 px; 边框:实体8px #00f; 透明度:0.2; ｝ <div id="myDiv">hello world!< / div >
RGB='#ffabcd';
A='0.5';
RGBA='('+parseInt(RGB.substring(1,3),16)+','+parseInt(RGB.substring(3,5),16)+','+parseInt(RGB.substring(5,7),16)+','+A+')';
#rrggbbaa符号在Chrome 62+和所有其他常绿浏览器中完全支持:
background: #56ff0077;
白马王子:
只有ie浏览器允许ARGB格式的4字节十六进制颜色，其中A是Alpha通道。它可以用于渐变过滤器，例如:
filter : ~"progid:DXImageTransform.Microsoft.Gradient(GradientType=@{dir},startColorstr=@{color1},endColorstr=@{color2})";
其中dir可以是:1(水平)或0(垂直) 颜色字符串可以是十六进制颜色(#FFAAD3)或argb十六进制颜色(#88FFAAD3)。
