เรามาพูดถึงการใช้งานขั้นสูงของแอตทริบิวต์ RGBA ที่ใช้กันอย่างแพร่หลายใน CSS3 กันดีกว่า ปัญหาความเข้ากันได้ของแอตทริบิวต์นี้ค่อนข้างง่าย IE8 รองรับแอตทริบิวต์นี้แล้ว และ IE6 และ IE7 ก็สามารถรองรับผ่านการแฮ็กได้เช่นกัน RGBA คล้ายกับแอตทริบิวต์ RBG ใน CSS2 ยกเว้นว่าแอตทริบิวต์ RGBA มีคำจำกัดความเพิ่มเติมเกี่ยวกับความโปร่งใส คำอธิบายของแอตทริบิวต์ RGBA ในมาตรฐาน CSS3 มีดังนี้:
| /*ไวยากรณ์พื้นฐาน*/ em { สี : Rgba ( แดง , เขียว , น้ำเงิน , ความทึบ ) } /* ตัวอย่าง*/ em { color : rgba ( 255 , 0 , 0 , 1 ) } /* แดง, ทึบแสง */ em { color : rgba ( 100 % , 0 % , 0 % , 1 ) } /* เหมือนข้างบน*/ |
ในความเป็นจริงการใช้ค่าทศนิยมสามค่าตั้งแต่ 1 ถึง 255 เพื่อกำหนดสีมีความแม่นยำมากกว่าการใช้เปอร์เซ็นต์ ต่อไปนี้เป็นค่า RGB ของหลายสี เมื่อใช้คุณจะต้องแปลงค่าเลขฐานสิบหกเท่านั้น ตั้งแต่ 00 ถึง FF เป็นทศนิยมจะทำ
พลังของ RGBA คือสามารถนำเสนอสีได้มากขึ้นผ่านคำจำกัดความของความโปร่งใสและการผสมสีในชั้นต่างๆ เช่นเดียวกับการผสมสี ตัวอย่างเช่น อันดับแรกเราตั้งค่าภาพพื้นหลังสำหรับเพจ จากนั้นตั้งค่าสีสำหรับเนื้อหาใน H1 ของเพจ เช่น:
|
h1 { สี : RGB ( 0 , 0 , 0 ) ; สีพื้นหลัง : rgb ( 255 , 255 , 255 ) ; - |
แต่จะเกิดอะไรขึ้นหากฉันไม่ตั้งค่าความโปร่งใสโดยรวม (แอตทริบิวต์ความทึบ) บน H1
|
h1 { สี : RGB ( 0 , 0 , 0 ) ; สีพื้นหลัง : rgb ( 255 , 255 , 255 ) ; ความทึบ : 0.5 ; - |
ผลกระทบที่เราเห็นที่นี่คือ H1 ทั้งหมดรวมถึงข้อความมีความโปร่งใส 50% อย่างไรก็ตาม ความโปร่งใสของข้อความส่งผลต่อการอ่าน ลองใช้แอตทริบิวต์ RGBA เพื่อตั้งค่าสีพื้นหลังของ H1 แยกกัน
|
h1 { สี : RGB ( 0 , 0 , 0 ) ; สีพื้นหลัง : rgba ( 255 , 255 , 255 , 0.5 ) ; - |
h1 { |
RGBA สามารถใช้ได้ทุกที่ที่ต้องตั้งค่าสี เช่น:
| div { สี : RGB ( 0 , 0 , 0 ) ; สีพื้นหลัง : rgb ( 255 , 255 , 255 ) ; เส้นขอบ : rgba ทึบ 10px ( 255 , 255 , 255 , 0.3 ) ; - |
ตั้งค่าความโปร่งใสเป็น 30% และเส้นขอบสีขาวทึบที่มีความกว้างของเส้น 10px สำหรับ div ทั้งหมด
| div { สี : RGBA ( 255 , 255 , 255 , 0.8 ) ; สีพื้นหลัง : rgba ( 142 , 213 , 87 , 0.3 ) ; - div :โฮเวอร์ { สี : RGBA ( 255 , 255 , 255 , 1 ) ; สีพื้นหลัง : rgba ( 142 , 213 , 87 , 0.6 ) ; - |
เลื่อนเมาส์ไปเพื่อเปลี่ยนความโปร่งใส
นอกจากนี้ หากใช้ร่วมกับ JavaScript คุณลักษณะ RGBA จะสามารถสร้างเอฟเฟกต์ที่น่าตื่นตาตื่นใจมากขึ้นได้
เปลี่ยนนิสัยการเขียน CSS ของคุณ
ในตัวอย่างข้างต้น คุณจะเห็นว่าผู้เขียนใช้ rgb() เพื่อระบุสีแทนที่จะใช้รูปแบบ #xxx แบบดั้งเดิมของการแสดงเลขฐานสิบหก นี่เป็นวิธีการเขียนที่เตรียมไว้สำหรับแอตทริบิวต์ RGBA ของ CSS3 การใช้ rgb() เพื่อระบุสีสามารถเข้าใจได้ว่า rgba() มีความทึบแสง แต่ความแตกต่างระหว่างทั้งสองนั้นน้อยมาก ซึ่งจะทำให้การอัพเกรดเป็น rgba เป็นเรื่องที่สะดวกมาก () ในอนาคต.
เข้ากันได้กับเบราว์เซอร์ทั้งหมด
แม้ว่าเบราว์เซอร์กระแสหลักเวอร์ชันล่าสุดจะรองรับคุณลักษณะ RGBA แล้ว แต่เราก็ต้องดูแลผู้ใช้ที่ใช้เบราว์เซอร์รุ่นเก่าด้วย ดังนั้นในบางสถานที่ เราจะปลอดภัยยิ่งขึ้นหากใช้วิธีเก่า มีหลายวิธีและทุกคนสามารถเลือกได้ตามความต้องการ
แม้ว่าสิ่งนี้จะส่งผลต่อเบราว์เซอร์เวอร์ชันต่ำกว่า แต่นี่เป็นวิธีที่ง่ายที่สุดและปลอดภัยที่สุด การดำเนินการเฉพาะมีดังนี้:
| h1 { สี : RGB ( 127 , 127 , 127 ) ; สี : RGBA ( 0 , 0 , 0 , 0.5 ) ; } |
ตั้งค่าสี rgb ก่อน จากนั้นจึงตั้งค่าสี rgba เพื่อให้เบราว์เซอร์ที่ไม่สนับสนุนแอตทริบิวต์ rgba จะแสดงเฉพาะสี rgb ในขณะที่เบราว์เซอร์ที่รองรับ rgba จะแสดงสี rgba เนื่องจากการกำหนดใหม่
ข้อดีของรูปแบบ PNG คือสามารถแสดงคุณสมบัติความโปร่งใสบนหน้าเว็บได้
| h1 { พื้นหลัง : URL โปร่งใส ( black50.png ) ; พื้นหลัง : rgba ( 0 , 0 , 0 , 0.5 ) ไม่มี ; } |
เอฟเฟกต์แบบเดียวกับ rgba ทำได้ผ่านพื้นหลัง PNG ที่มีความโปร่งใส 50%
สามารถใช้คุณลักษณะส่วนตัวของ IE เพื่อแก้ปัญหา IE6 และ IE7 ซึ่งสามารถบรรลุผลบางอย่างเช่นเดียวกับ rgba
| h1 { ตัวกรอง :progid :DXImageTransform .Microsoft .Gradient ( GradientType = 1 , StartColorStr = '#80000000' , EndColorStr = '#80000000' ) ; } |
ลิงก์ต้นฉบับ: การใช้งานขั้นสูงของแอตทริบิวต์ CSS3 RGBA
ขอบคุณ bolo สำหรับการสนับสนุนของเขา