2009-09-14 67 views
76

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

是#RGBA还是#ARGB?

+5

它的到来在CSS颜色4级[来源](HTTP:// lists.w3.org/Archives/Public/www-style/2013Apr/0051.html)(见第四个要点) –

+0

@ŠimeVidas如果你已经在答案中提出了这个问题,我会提高你的评价。 –

+0

@cirosantilli我看起来像我需要代表? ':-P' –

回答

43

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

在CSS 4 *,可以指定使用第七和一个8位十六进制颜色的第八字符,或一个4位十六进制颜色的第四字符阿尔法通道(见CSS Level 4 spec *)

浏览器支持作为2017年11月

  • 自从Firefox 49(Mozilla bug 567283)以来,Firefox已经支持这种语法。
  • Safari自Safari 10以来支持此语法。
  • 自Chrome 62以来,Chrome在桌面上支持此语法。对于早期版本,您可以启用实验性网页功能以使用此语法。请参阅Chromium Issue 618472Webkit bug 150853
  • Android上的Chrome预计支持Android P中的语法。
  • Opera将可能在Opera 49中支持此语法。
  • IE 11和EdgeHTML 15(Edge 40)不支持此语法。

到目前为止浏览器支持信息available on CanIUse.com

*技术上仍处于草案,但由于浏览器的支持,这是不可能改变的。

+2

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

+0

有关当前浏览器支持信息,请参阅https://caniuse.com/#feat=css-rrggbbaa – Stony

14

我不知道,如果有一个正式的标准 -

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

我相信,RGBA是比较常见的表现。

如果有帮助,这是从W3对CSS3
http://www.w3.org/TR/css3-color/#rgba-color

编辑(帕特里克):报价从上面的W3链接

与RGB值,没有十六进制表示为RGBA值

+2

此外,用于指定带alpha的颜色的CSS函数是从您发布的W3链接获得的rgba() – Amber

+7

:与RGB值不同,RGBA值不存在十六进制符号。 –

+2

我见过#RGB,A之前。奇怪的。 – Joshua

67

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

无论如何,如果你使用一个CSS预处理器像SASS那么你可以传递一个十六进制rgba: 背景:

rgba(#000, 0.5); 

器和预处理器只是转换的十六进制代码自动RGB。

+3

非常酷。感谢提及! – AndrewHenderson

1

您可以尝试将十六进制颜色放入GIMP或照片商店的颜色选择器以获取RGB值,然后使用alpha值。例如。红色是#FF0000rgb(255,0,0)如果你想红色的alpha值为.5,然后rgba(255,0,0,.5)

也许不完全是你想要的,但希望有所帮助。

+0

这是投票下来,这似乎有点苛刻。它没有回答所问的问题,但问题并没有说明他们为什么想知道。如果他们只是想在CSS中使用RGBA颜色,那么这个答案是正确的。 – thelem

1

铬52+ supports阿尔法(十六进制)

background: #56ff0077; 

对于旧的浏览器,你将不得不使用:

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

不,它不会,除非您启用实验性网页功能,因为它在Android上造成问题。有关浏览器支持的详细信息,请参阅上面的答案 – thelem

相关问题