เล่นกับสี CSS3

โดยทั่วไป สีที่ใช้ใน CSS จะอยู่ในรูปแบบเลขฐานสิบหกหรือรูปแบบ rgb เช่น rgb(171,205,239)

CSS3 นำเสนอวิธีใหม่ๆ ในการจัดการกับสี เช่น การใช้ HSL (Hue, Saturation, Light) และความทึบ/ช่องอัลฟา ขออภัย ขณะนี้มีเพียง Firefox 3+, Chrome 1.0+ และ Safari 3+ และเบราว์เซอร์อนุพันธ์บางตัวเท่านั้นที่รองรับอย่างสมบูรณ์ แต่เราสามารถทำให้ดีที่สุดได้ และ IE จะไม่เริ่มรองรับคุณสมบัติ CSS3 บางอย่างจนกว่า Internet Explorer 9

ความทึบ

นี่เป็นคุณสมบัติเก่าจริงๆ และน่าประหลาดใจที่ IE เวอร์ชันปัจจุบันรองรับ แม้ว่าจะมีวิธีที่ซับซ้อนกว่าก็ตาม

ความทึบทำให้วัตถุ CSS ทั้งหมดโปร่งใส และความโปร่งใสขององค์ประกอบย่อยทั้งหมดจะได้รับการสืบทอดอย่างเหมาะสม ไวยากรณ์อย่างเป็นทางการมีดังนี้:

ความทึบ: [ทศนิยม 0-1];

ความทึบ: 0.5; การตั้งค่าจะทำให้วัตถุโปร่งใส 50% แม้ว่าเบราว์เซอร์รุ่นใหม่จะสนับสนุนเบราว์เซอร์รุ่นเก่ายังคงต้องใช้โค้ดที่กำหนดเอง เช่นเดียวกับ Internet Explorer

ในปัจจุบัน สำหรับ Firefox เวอร์ชันเก่า เราจำเป็นต้องใช้คำนำหน้า -moz- และสำหรับ Safari/Chrome เวอร์ชันเก่า เราจำเป็นต้องใช้คำนำหน้า -webkit- สำหรับ Safari เวอร์ชันเก่าที่ยังคงใช้เคอร์เนล KHTML แทนเคอร์เนล webkit เราจำเป็นต้องใช้ -khtml- ดังนั้นหากเราต้องการรองรับทุกเบราว์เซอร์ โค้ดของเราควรมีลักษณะดังนี้:

ความทึบ: 0.5;
-ความทึบแสง: 0.5;
-webkit-ความทึบ: 0.5;
-khtml-ความทึบ: 0.5;

อา รอสักครู่! จะทำอย่างไรกับ IE? IE ไม่รองรับสิ่งนี้เลย แต่ใช้ตัวกรองที่เป็นกรรมสิทธิ์ วิธีการแบบดั้งเดิมนั้นสั้นและกระชับ:

ตัวกรอง: อัลฟ่า (ความทึบ = 50);

โปรดทราบว่าสำหรับ IE เราจำเป็นต้องใช้จำนวนเต็มตั้งแต่ 0 ถึง 100 ไม่ใช่ทศนิยมเช่นแอตทริบิวต์ความทึบ น่าเศร้าที่ Internet Explorer 8 มอบวิธีใหม่ในการจัดการสิ่งนี้ อย่าพยายามจำอันนี้เหมือนอันอื่นเพราะมันยาว:

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(ความทึบ=50)";

แน่นอน หากคุณต้องการรองรับเบราว์เซอร์ IE รุ่นเก่า คุณจะต้องใช้คำสั่งที่สั้นกว่าข้างต้น ซึ่งหมายความว่าหากคุณต้องการเข้ากันได้กับเบราว์เซอร์ส่วนใหญ่ คุณจะต้องมีคำสั่ง CSS ทั้งหมดหกคำสั่ง

PS: ที่จริงแล้ว Safari รองรับแอตทริบิวต์ความทึบตั้งแต่เวอร์ชัน 1.2 (2004) โดยพื้นฐานแล้ว Safari ที่มีแกน KHTML นั้นหาได้ยากอีกต่อไป จริงๆ แล้ว Konqueror ไม่เคยรองรับแอตทริบิวต์ -khtml-opacity ดังนั้นโปรดอย่าใช้มัน (ฉันพิจารณาความสมบูรณ์ของข้อความต้นฉบับเมื่อแปล ดังนั้นฉันจึงไม่ได้ทำการแก้ไขโค้ดข้างต้น) Opera รองรับความทึบของ CSS3 ตั้งแต่ 9.0 ในขณะที่ Firefox ไม่รองรับความทึบจนถึง 3.5 ตัวกรอง -ms- plus ของ IE8 เป็นผลงานอัจฉริยะของ Microsoft จริงๆ! อย่างไรก็ตาม โปรดทราบว่าหากคุณต้องการใช้ตัวกรองและ -ms-filter ในเวลาเดียวกัน โปรดทราบว่า -ms-filter จะถูกเขียนไว้ด้านหน้าตัวกรอง ——เซินเฟย