การแสดงสี Hex ด้วยช่องอัลฟา?

117

มี W3 หรือมาตรฐานที่น่าสังเกตอื่น ๆ เกี่ยวกับวิธีการแสดงสี (รวมถึงช่องอัลฟา) ในรูปแบบฐานสิบหกหรือไม่?

เป็น #RGBA หรือ #ARGB?

colors standards w3c

— Patrick Klug
แหล่งที่มา

8

มันมาใน CSS ระดับสี 4 แหล่งที่มา (ดู bullet จุดสี่)

— Sime Vidas

@ ŠimeVidasถ้าคุณตอบได้ฉันจะโหวตให้คุณ

— Ciro Santilli 郝海东冠状病六四事件法轮功

@cirosantilli ฉันดูเหมือนว่าฉันต้องการตัวแทนหรือไม่? :-P

— Šime Vidas

1

@ ŠimeVidas lol ถ้าคุณสนใจที่จะแบ่งปันแล้ว ... =)

— Ciro Santilli 郝海东冠状病六四事件法轮功

มีคำถามเฉพาะ CSS ที่คล้ายกันที่นี่: CSS hexidecimal RGBA?

— James Donnelly

83

ใน CSS 3 หากต้องการอ้างอิงจากข้อมูลจำเพาะ "ไม่มีสัญกรณ์ฐานสิบหกสำหรับค่า RGBA" (ดูข้อกำหนด CSS ระดับ 3 ) แต่คุณสามารถใช้สัญกรณ์การทำงาน rgba () ที่มีทศนิยมหรือเปอร์เซ็นต์ได้เช่น rgba (255, 0, 0, 0.5) จะเป็นสีแดงโปร่งใส 50% ช่อง RGB คือ 0-255 หรือ 0% -100% อัลฟาคือ 0-1

ใน CSS 4 * คุณสามารถระบุช่องอัลฟาโดยใช้อักขระที่ 7 และ 8 ของสีฐานสิบหก 8 หลักหรืออักขระตัวที่ 4 ของสีฐานสิบหก 4 หลัก (ดูข้อกำหนด CSS ระดับ 4 *)

ในเดือนพฤษภาคม 2019 คาดว่าผู้ใช้> 80% จะเข้าใจรูปแบบ #RGBA

Firefox สนับสนุนไวยากรณ์นี้ตั้งแต่ Firefox 49 ( Mozilla bug 567283 )
Safari รองรับไวยากรณ์นี้ตั้งแต่ Safari 10
Chrome สนับสนุนไวยากรณ์นี้ตั้งแต่ Chrome 62 สำหรับเวอร์ชันก่อนหน้านี้คุณสามารถเปิดใช้งานคุณลักษณะของเว็บรุ่นทดลองเพื่อใช้ไวยากรณ์นี้ได้ ดูโครเมี่ยมที่ออก 618472และWebkit ข้อผิดพลาด 150853
แอป Android ที่กำหนดเป้าหมายเป็น Android P หรือใหม่กว่าสามารถใช้ไวยากรณ์นี้ได้
Opera รองรับไวยากรณ์นี้ใน Opera 52 (หรือ Opera 39 เมื่อเปิดใช้งานคุณสมบัติเว็บทดลอง)
IE 11 และ EdgeHTML 18 (Edge 44) ไม่รองรับไวยากรณ์นี้ Edge เวอร์ชันที่ใช้ Chromium จะรองรับไวยากรณ์นี้

ข้อมูลการสนับสนุนเบราว์เซอร์ล่าสุดมีอยู่ใน CanIUse.com

* ในทางเทคนิคยังอยู่ในร่าง แต่เนื่องจากการสนับสนุนเบราว์เซอร์จึงไม่น่าจะเปลี่ยนแปลงได้

— เธเลม
แหล่งที่มา

2

ณ ตอนนี้ Mozilla (Firefox 49) ดูเหมือนว่าจะรองรับ #RRGGBBAA และ #RGBA

— Shiyaz

92

ดูเหมือนว่าจะไม่มีรูปแบบ hex alpha: http://www.w3.org/TR/css3-color/

อย่างไรก็ตามหากคุณใช้ตัวประมวลผลล่วงหน้า CSS เช่น SASS คุณสามารถส่งฐานสิบหกไปที่rgba: background:

rgba(#000, 0.5);

และตัวประมวลผลล่วงหน้าจะแปลงรหัสฐานสิบหกเป็น rgb โดยอัตโนมัติ

— guitarranalon
แหล่งที่มา

15

ฉันไม่แน่ใจว่ามีมาตรฐานอย่างเป็นทางการ -

RGBA เป็นตัวแทนที่ฉันเคยเห็นสำหรับ Web Macromedia และอื่น ๆ ใช้ ARGB

ฉันเชื่อว่า RGBA เป็นตัวแทนทั่วไป

ถ้ามันช่วยได้นี่คือจาก W3 สำหรับ CSS3
http://www.w3.org/TR/css3-color/#rgba-color

แก้ไข (แพทริค): อ้างจากลิงค์ W3 ด้านบน

ไม่เหมือนค่า RGB ไม่มีสัญกรณ์ฐานสิบหกสำหรับค่า RGBA

— Kelly Gendron
แหล่งที่มา

2

นอกจากนี้ฟังก์ชัน CSS สำหรับการระบุสีด้วยอัลฟาคือ rgba ()

— Amber

8

จากลิงก์ W3 ที่คุณโพสต์: ไม่เหมือนกับค่า RGB ไม่มีสัญกรณ์ฐานสิบหกสำหรับค่า RGBA

— Patrick Klug

2

ฉันเคยเห็น # RGB, A มาก่อน แปลก.

— Joshua

สำหรับ Android drawables ดูเหมือนว่าจะเป็น ARGB: developer.android.com/reference/android/graphics/drawable/…

— Derek Kurth

10

Chrome 52+ รองรับ alpha hex:

background: #56ff0077;

สำหรับเบราว์เซอร์รุ่นเก่าคุณจะต้องใช้:

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

— Oded Breiner
แหล่งที่มา

3

ไม่ทำเช่นนั้นเว้นแต่คุณจะเปิดใช้งานคุณลักษณะของเว็บรุ่นทดลองเนื่องจากทำให้เกิดปัญหาใน Android ดูคำตอบของฉันด้านบนสำหรับรายละเอียดการสนับสนุนเบราว์เซอร์

— thelem

3

คุณสามารถลองใส่สีฐานสิบหกลงในตัวเลือกสีของ GIMP หรือโฟโต้ช็อปเพื่อรับค่า RGB จากนั้นใช้ค่าอัลฟา เช่น. สีแดง#FF0000หรือrgb(255,0,0) ถ้าคุณต้องการสีแดงที่มีค่าอัลฟาของ 0.5 rgba(255,0,0,.5)แล้ว

อาจจะไม่ตรงกับที่คุณต้องการ แต่หวังว่าจะช่วยได้

— Jinjubei
แหล่งที่มา

1

สิ่งนี้ถูกโหวตลงซึ่งดูเหมือนจะรุนแรงไปหน่อย มันไม่ตอบคำถามที่ถาม แต่คำถามไม่ได้บอกว่าทำไมพวกเขาถึงอยากรู้ หากพวกเขาต้องการใช้สี RGBA ใน CSS คำตอบนี้ถูกต้อง

— thelem