我知道你能写…

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位整数的最大值


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+')';

不同颜色的符号是你要学习的。 库尔给你一个更好的机会找到颜色和多种符号。十六进制与RGB, FF = 255和00 = 0没有什么不同,但这就是你所知道的。所以在某种程度上,你必须把它形象化。 我使用Hex, RGBA和RGB。除非需要大量转换,否则手动这样做将帮助您记住一些奇怪的100种颜色及其代码。 要进行大规模转换,请编写一些类似Alarie所给出的脚本。尽情享受色彩的乐趣吧。


我在对问题进行增强后找到了答案。对不起!

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

为什么不使用 background - color: # ff0000; 透明度:0.5; 过滤器:α(不透明度= 50);IE */中的/*

如果您为文本或元素指定颜色,这应该容易得多。


白马王子:

只有ie浏览器允许ARGB格式的4字节十六进制颜色,其中A是Alpha通道。它可以用于渐变过滤器,例如:

filter  : ~"progid:DXImageTransform.Microsoft.Gradient(GradientType=@{dir},startColorstr=@{color1},endColorstr=@{color2})";

其中dir可以是:1(水平)或0(垂直) 颜色字符串可以是十六进制颜色(#FFAAD3)或argb十六进制颜色(#88FFAAD3)。


CSS颜色模块级别4将可能支持4和8位十六进制RGBA符号!

三周前(2014年12月18日),CSS颜色模块4级编辑的草案提交给了CSS W3C工作组。尽管当前的文档版本很容易发生变化,但它意味着在不久的将来CSS将同时支持4位和8位十六进制RGBA表示法。

注意:下面的引用被删去了不相关的部分,当你读到这篇文章时,来源可能已经被严重修改了(如上所述,这是编辑的草稿,而不是最终的文件)。如果事情发生了很大的变化,请留下评论让我知道,这样我就可以更新这个答案!

§ 4.2. The RGB hexadecimal notations: #RRGGBB The syntax of a <hex-color> is a <hash-token> token whose value consists of 3, 4, 6, or 8 hexadecimal digits. In other words, a hex color is written as a hash character, "#", followed by some number of digits 0-9 or letters a-f (the case of the letters doesn’t matter - #00ff00 is identical to #00FF00). 8 digits The first 6 digits are interpreted identically to the 6-digit notation. The last pair of digits, interpreted as a hexadecimal number, specifies the alpha channel of the color, where 00 represents a fully transparent color and ff represent a fully opaque color. Example 3In other words, #0000ffcc represents the same color as rgba(0, 0, 100%, 80%) (a slightly-transparent blue). 4 digits This is a shorter variant of the 8-digit notation, "expanded" in the same way as the 3-digit notation is. The first digit, interpreted as a hexadecimal number, specifies the red channel of the color, where 0 represents the minimum value and f represents the maximum. The next three digits represent the green, blue, and alpha channels, respectively.

这对CSS颜色的未来意味着什么?

这意味着假设这没有完全从4级文档中删除,我们很快就能在支持颜色模块4级语法的浏览器中以十六进制格式定义我们的RGBA颜色(或者HSLA颜色,如果你是其中之一的话)。

例子

elem {
    background: rgb(0, 0, 0);           /* RGB notation (no alpha). */
    background: #000;                   /* 3-digit hexadecimal notation (no alpha). */
    background: #000000;                /* 6-digit hexadecimal notation (no alpha). */
    background: rgba(0, 0, 0, 1.0);     /* RGBA notation. */

    /* The new 4 and 8-digit hexadecimal notation. */
    background: #0000;                  /* 4-digit hexadecimal notation. */
    background: #00000000;              /* 8-digit hexadecimal notation. */
}

我什么时候能在面向客户的产品中使用它?

开玩笑的是:现在只是2015年的开始,所以在很长一段时间内这些功能都不会在任何浏览器中得到支持——即使你的产品只设计在最新的浏览器上运行,你也可能不会很快在产品浏览器中看到这些功能。

查看当前浏览器对#RRGGBBAA颜色符号的支持

然而,也就是说,CSS的工作方式意味着我们今天就可以开始使用这些!如果你真的想现在就开始使用它们,只要你添加了一个后退,任何不支持的浏览器都会简单地忽略这些新属性,直到它们被认为有效:

图{ 保证金:0; 填充:4 px; /*后退(…不支持alpha透明的浏览器)。* / 背景:# FEFE7F; 颜色:# 3 f3ffe; /*当前的“现代”浏览器支持。* / 背景:rgba(255,255,0, 0.5); 颜色:rgba(0, 0, 255, 0.75); / *下降……前进牌汽车?* / 背景:# ffff007F;/*或者更准确地说,#ff08 */ 颜色:# 0000 ffbe;/*或#00fc */ } <人物>你好,世界!图> < /

只要你在一个支持CSS中的背景和颜色属性的浏览器上查看这个答案,上面代码片段的<figure>元素的结果将看起来非常相似:

使用最新版本的Chrome on Windows (v39.0.2171)检查<figure>元素,我们将看到以下内容:

rgba()值覆盖了6位十六进制回退,我们的8位十六进制值被忽略,因为它们目前被Chrome的CSS解析器视为无效。只要我们的浏览器支持这些8位数的值,它们就会覆盖rgba()的值。

更新2018-07-04:Firefox, Chrome和Safari现在都支持这个符号,Edge还没有,但可能会跟上(https://caniuse.com/#feat=css-rrggbbaa)。


如果你可以使用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));

#rrggbbaa符号在Chrome 62+和所有其他常绿浏览器中完全支持:

background: #56ff0077;

Sass有红色,绿色,蓝色可以从十六进制颜色中提取通道:

background-color: rgba(red($hex_color), green($hex_color), blue($hex_color), 0.2);

Sass也有rgba($hex_color, $alpha)


在Sass中,我们可以这样写:

background-color: rgba(#ff0000, 0.5);

因为它被建议在十六进制表示的颜色与alpha通道?


如果你所有的颜色都在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);

在伪元素之后使用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 >