当前位置:  开发笔记 > 前端 > 正文

带alpha通道的颜色的十六进制表示?

如何解决《带alpha通道的颜色的十六进制表示?》经验,为你挑选了4个好方法。

是否有关于如何以十六进制格式表示颜色(包括alpha通道)的W3或任何其他值得注意的标准?

是#RGBA还是#ARGB?



1> 小智..:

看起来没有十六进制alpha格式:http://www.w3.org/TR/css3-color/

无论如何,如果您使用像SASS这样的CSS预处理器,那么您可以将十六进制传递给rgba:background:

rgba(#000, 0.5);

预处理器只是自动将十六进制代码转换为rgb.



2> thelem..:

在CSS 3中,引用规范,"RGBA值没有十六进制表示法"(参见CSS Level 3规范).相反,您可以使用带小数或百分比的rgba()函数表示法,例如rgba(255,0,0,0.5)将是50%透明红色.RGB通道为0-255或0%-100%,alpha为0-1.

在CSS 4*中,您可以使用8位十六进制颜色的第7和第8个字符或4位十六进制颜色的第4个字符指定Alpha通道(请参阅CSS Level 4规范*)

浏览器支持截至2018年9月

自Firefox 49(Mozilla bug 567283)以来,Firefox一直支持这种语法.

自Safari 10以来,Safari一直支持这种语法.

自Chrome 62以来,Chrome一直支持此语法.对于早期版本,您可以启用实验性网络功能来使用此语法.请参阅Chromium Issue 618472和Webkit bug 150853.

针对Android P或更新版本的Android应用可以使用此语法

Opera在Opera 52(或启用实验性Web功能时的Opera 39)中支持此语法.

IE 11和EdgeHTML 17(Edge 42)不支持此语法.

CanIUse.com上提供了最新的浏览器支持信息

*技术上仍然在草案中,但鉴于浏览器支持,这不太可能改变.


截至目前,Mozilla(Firefox 49)似乎支持#RRGGBBAA和#RGBA

3> Kelly Gendro..:

我不确定是否有官方标准 -

RGBA是我见过的Web Macromedia和其他人使用ARGB的表示

我相信RGBA是更常见的表现形式.

如果它有助于这是来自W3的CSS3
http://www.w3.org/TR/css3-color/#rgba-color

编辑(帕特里克):引用上面的W3链接

与RGB值不同,RGBA值没有十六进制表示法


从您发布的W3链接:与RGB值不同,RGBA值没有十六进制表示法.
此外,用alpha指定颜色的CSS函数是rgba()
我以前见过#RGB,A.奇怪的.

4> Oded Breiner..:

Chrome 52+ 支持 alpha十六进制:

background: #56ff0077;

对于较旧的浏览器,您必须使用:

background-color: rgba(255, 220, 0, 0.3);


不,除非您启用实验性网络功能,否则不会这样,因为这会在Android上引起问题。有关浏览器支持的详细信息,请参见上面的答案。
推荐阅读
ar_wen2402851455
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有