Đại diện hex của một màu với kênh alpha?


117

Có W3 hoặc bất kỳ tiêu chuẩn đáng chú ý nào khác về cách thể hiện màu (bao gồm cả kênh alpha) ở định dạng hex không?

Đó là #RGBA hay #ARGB?


8
Nó đến trong CSS Màu Cấp 4 nguồn (xem điểm viên đạn thứ tư)
Šime Vidas

@ ImeVidas nếu bạn đã trả lời câu hỏi đó, tôi đã nâng cấp bạn.
Ciro Santilli 郝海东 冠状 病 事件

@cirosantilli Tôi có vẻ như tôi cần người đại diện không? :-P
Vidime Vidas

1
@ ImeVidas lol, nếu bạn muốn chia sẻ một số thì ... =)
Ciro Santilli 冠状 病 六四 事件

Có một câu hỏi cụ thể về CSS tương tự về vấn đề này ở đây: CSS hexidecimal RGBA?
James Donnelly

Câu trả lời:


82

Trong CSS 3, để trích dẫn từ thông số kỹ thuật, "không có ký hiệu thập lục phân cho giá trị RGBA" (xem thông số CSS Cấp 3 ). Thay vào đó, bạn có thể sử dụng ký hiệu chức năng rgba () với số thập phân hoặc tỷ lệ phần trăm, ví dụ rgba (255, 0, 0, 0,5) sẽ có màu đỏ trong suốt 50%. Các kênh RGB là 0-255 hoặc 0% -100%, alpha là 0-1.

Trong CSS 4 *, bạn có thể chỉ định kênh alpha bằng cách sử dụng các ký tự thứ 7 và thứ 8 của màu lục giác 8 chữ số hoặc ký tự thứ 4 của màu lục giác 4 ​​chữ số (xem thông số CSS Cấp 4 *)

Kể từ tháng 5 năm 2019,> 80% người dùng có thể được mong đợi hiểu định dạng #RGBA

  • Firefox đã hỗ trợ cú pháp này kể từ Firefox 49 ( lỗi Mozilla 567283 ).
  • Safari đã hỗ trợ cú pháp này kể từ Safari 10.
  • Chrome đã hỗ trợ cú pháp này kể từ Chrome 62. Đối với các phiên bản trước đó, bạn có thể kích hoạt các tính năng web thử nghiệm để sử dụng cú pháp này. Xem Vấn đề về Chromium 618472lỗi Webkit 150853 .
  • Ứng dụng Android nhắm mục tiêu Android P hoặc mới hơn có thể sử dụng cú pháp này
  • Opera hỗ trợ cú pháp này trong Opera 52 (hoặc Opera 39 khi bật các tính năng web thử nghiệm).
  • IE 11 và EdgeHTML 18 (Edge 44) không hỗ trợ cú pháp này. Các phiên bản Edge dựa trên Chromium sẽ hỗ trợ cú pháp này.

Thông tin hỗ trợ trình duyệt cập nhật có sẵn trên CanIUse.com

* Về mặt kỹ thuật vẫn còn trong dự thảo, nhưng được hỗ trợ trình duyệt, điều này khó có thể thay đổi.


2
Đến bây giờ, Mozilla (Firefox 49) dường như hỗ trợ #RRGGBBAA và #RGBA
Shiyaz

92

Có vẻ như không có định dạng hex alpha: http://www.w3.org/TR/css3-color/

Dù sao, nếu bạn sử dụng bộ tiền xử lý CSS như SASS thì bạn có thể chuyển hex sang rgba: nền:

rgba(#000, 0.5);

Và bộ tiền xử lý chỉ tự động chuyển đổi mã hex thành rgb.


15

Tôi không chắc có tiêu chuẩn chính thức nào không

RGBA là đại diện tôi từng thấy cho Web Macromedia và những người khác sử dụng ARGB

Tôi tin rằng RGBA là đại diện phổ biến hơn.

Nếu nó giúp điều này là từ W3 cho CSS3
http://www.w3.org/TR/css3-color/#rgba-color

EDIT (Patrick): trích dẫn từ liên kết W3 ở trên

Không giống như các giá trị RGB, không có ký hiệu thập lục phân cho giá trị RGBA


2
Ngoài ra, chức năng CSS để chỉ định màu bằng bảng chữ cái là rgba ()
Amber

8
từ liên kết W3 mà bạn đã đăng: Không giống như các giá trị RGB, không có ký hiệu thập lục phân cho giá trị RGBA.
Patrick Klug

2
Tôi đã thấy # RGB, A trước đây. Kỳ dị.
Joshua

Đối với các bản vẽ Android, nó dường như là ARGB: developer.android.com/reference/android/graphics/drawable/
Derek Kurth

10

Chrome 52+ hỗ trợ alpha hex:

background: #56ff0077;

Đối với các trình duyệt cũ hơn, bạn sẽ phải sử dụng:

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

3
Không, không, trừ khi bạn kích hoạt các tính năng web thử nghiệm, vì nó gây ra sự cố trên Android. Xem câu trả lời của tôi ở trên để biết chi tiết hỗ trợ trình duyệt.
thelem

3

Bạn có thể thử đặt màu hex vào bộ chọn màu của GIMP hoặc cửa hàng ảnh để lấy giá trị RGB và sau đó sử dụng giá trị alpha. ví dụ. màu đỏ là #FF0000hoặc rgb(255,0,0) nếu bạn muốn màu đỏ có giá trị alpha là 0,5 rgba(255,0,0,.5).

Có thể không chính xác những gì bạn muốn nhưng hy vọng sẽ giúp.


1
Điều này đã được bỏ phiếu xuống, có vẻ hơi khắc nghiệt. Nó không trả lời câu hỏi được hỏi, nhưng câu hỏi không nói lý do tại sao họ muốn biết. Nếu họ chỉ muốn sử dụng màu RGBA trong CSS, thì câu trả lời này là chính xác.
thelem
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.