การเบลอและการเปลี่ยนสีด้านหลังองค์ประกอบ
ความโปร่งแสง การเบลอ และเอฟเฟกต์อื่นๆ คือวิธีที่เป็นประโยชน์ในการสร้างความลึกและยังคงรักษาบริบทของเนื้อหาในพื้นหลังเอาไว้ โซลูชันเหล่านี้รองรับกรณีการใช้งานที่หลากหลาย เช่น กระจกฝ้า การวางซ้อนวิดีโอ ส่วนหัวการนำทางแบบโปร่งแสง การเซ็นเซอร์รูปภาพที่ไม่เหมาะสม การโหลดรูปภาพ และอื่นๆ คุณอาจจำผลกระทบเหล่านี้ได้จากระบบปฏิบัติการยอดนิยม 2 ระบบ ได้แก่ Windows 10 และ iOS
ก่อนหน้านี้ เทคนิคเหล่านี้นำมาใช้ได้ยากบนเว็บ ซึ่งต้องใช้การแฮ็กหรือวิธีแก้ไขเบื้องต้นที่ไม่สมบูรณ์แบบ ในช่วงไม่กี่ปีที่ผ่านมา ทั้ง Safari และ Edge ได้มอบความสามารถเหล่านี้ผ่านพร็อพเพอร์ตี้ background-filter
(หรือ -webkit-backdrop-filter
) ซึ่งจะผสมผสานสีพื้นหน้าและสีพื้นหลังแบบไดนามิกโดยอิงตามฟังก์ชันตัวกรอง ตอนนี้ Chrome รองรับ background-filter
ตั้งแต่เวอร์ชัน 76 เป็นต้นไป
การสนับสนุนเบราว์เซอร์
เมื่อระบบไม่รองรับ backdrop-filter
ให้กลับไปใช้รูปภาพแทน Polyfill เพื่อเหตุผลด้านประสิทธิภาพ โดยตัวอย่างด้านล่าง
@supports (backdrop-filter: none) {
.background {
backdrop-filter: blur(10px);
}
}
@supports not (backdrop-filter: none) {
.background {
background-image: blurred-hero.png;
}
}
พื้นฐาน
- พร็อพเพอร์ตี้
backdrop-filter
จะใช้ตัวกรองอย่างน้อย 1 รายการกับองค์ประกอบ 1 รายการ ซึ่งจะเปลี่ยนแปลงลักษณะของสิ่งต่างๆ ที่อยู่หลังองค์ประกอบนั้น - องค์ประกอบที่วางซ้อนต้องมีความโปร่งใสอย่างน้อยบางส่วน
- องค์ประกอบที่วางซ้อนจะได้รับบริบทการซ้อนใหม่
CSS backdrop-filter
จะใช้เอฟเฟกต์อย่างน้อย 1 รายการกับองค์ประกอบโปร่งแสงหรือโปร่งใส โปรดพิจารณารูปภาพด้านล่างเพื่อทำความเข้าใจ
.frosty-glass-pane { backdrop-filter: blur(2px); }
.frosty-glass-pane { opacity: .9; backdrop-filter: blur(2px); }
รูปภาพทางด้านซ้ายจะแสดงลักษณะการแสดงผลองค์ประกอบที่ทับซ้อนกันหากไม่ได้ใช้หรือรองรับ backdrop-filter
รูปภาพทางด้านขวาใช้เอฟเฟกต์เบลอโดยใช้ backdrop-filter
โปรดสังเกตว่ารายการนี้ใช้ opacity
เพิ่มเติมจาก backdrop-filter
หากไม่มี opacity
ก็จะไม่มีการใช้การเบลอ ระบบแทบจะไม่ต้องพูดได้ว่าหากตั้งค่า opacity
เป็น 1
(ทึบแสงเต็ม) จะไม่มีเอฟเฟกต์ในพื้นหลัง
พร็อพเพอร์ตี้ backdrop-filter
เหมือนกับตัวกรอง CSS ตรงที่รองรับฟังก์ชันตัวกรองทั้งหมดที่คุณชื่นชอบ ได้แก่ blur()
, brightness()
, contrast()
, opacity()
, drop-shadow()
และอื่นๆ และยังรองรับฟังก์ชัน url()
หากคุณต้องการใช้รูปภาพภายนอกเป็นตัวกรอง รวมถึงคีย์เวิร์ด none
, inherit
, initial
และ unset
ด้วย มีคำอธิบายเกี่ยวกับทั้งหมดนี้ใน MDN รวมถึงคำอธิบายไวยากรณ์ ตัวกรอง และค่า
เมื่อตั้งค่า backdrop-filter
เป็นอย่างอื่นที่ไม่ใช่ none
เบราว์เซอร์จะสร้างบริบทการซ้อนใหม่ ระบบอาจสร้างบล็อกที่มีอยู่ด้วยก็ต่อเมื่อองค์ประกอบมีตำแหน่งสืบทอดตำแหน่งแบบสัมบูรณ์และคงที่
คุณรวมฟิลเตอร์เข้าด้วยกันเพื่อเอฟเฟกต์ที่สมบูรณ์และชาญฉลาด หรือจะใช้ฟิลเตอร์เดียวเพื่อให้ได้เอฟเฟกต์ที่ละเอียดและแม่นยำมากขึ้นก็ได้ และยังใช้ร่วมกับฟิลเตอร์ SVG ได้ด้วย
ตัวอย่าง
เทคนิคและสไตล์การออกแบบที่ก่อนหน้านี้สงวนไว้สำหรับระบบปฏิบัติการมีประสิทธิภาพและประสบความสำเร็จได้ด้วยการประกาศ CSS รายการเดียว เรามาดูตัวอย่างกัน
ตัวกรองเดียว
ในตัวอย่างต่อไปนี้ เอฟเฟกต์กระจกฝ้าจะสำเร็จโดยการรวมสีและความเบลอเข้าด้วยกัน การเบลอมาจาก backdrop-filter
ส่วนสีมาจากสีพื้นหลังแบบกึ่งโปร่งใสขององค์ประกอบ
.blur-behind-me {
background-color: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(.5rem);
}
ตัวกรองหลายรายการ
บางครั้งคุณอาจต้องใช้ตัวกรองหลายรายการเพื่อให้ได้ผลลัพธ์ที่ต้องการ โดยให้แสดงรายการตัวกรองโดยคั่นด้วยเว้นวรรค เช่น
.brighten-saturate-and-blur-behind-me {
backdrop-filter: brightness(150%) saturate(150%) blur(1rem);
}
ในตัวอย่างต่อไปนี้ แต่ละแผงมีฟิลเตอร์ฉากหลังต่างกัน แต่มีรูปร่างชุดเดียวกันเคลื่อนไหวอยู่ด้านหลัง
การวางซ้อน
ตัวอย่างนี้แสดงวิธีเบลอพื้นหลังกึ่งโปร่งใสเพื่อทำให้ข้อความอ่านง่ายและกลมกลืนไปกับพื้นหลังของหน้าเว็บ
.modal {
backdrop-filter: blur(10px);
background-color: rgba(255, 255, 255, 0.5);
}
คอนทราสต์ของข้อความบนพื้นหลังแบบไดนามิก
ตามที่ระบุไว้ก่อนหน้านี้ backdrop-filter
อนุญาตให้มีการเอฟเฟกต์ที่มีประสิทธิภาพซึ่งทำได้ยากหรือเป็นไปไม่ได้บนเว็บ ตัวอย่างนี้คือการเปลี่ยนพื้นหลังเพื่อตอบสนองต่อภาพเคลื่อนไหว ในตัวอย่างนี้ backdrop-filter
จะรักษาความคมชัดสูงระหว่างข้อความและพื้นหลัง แม้ว่าข้อความจะอยู่หลังข้อความก็ตาม โดยจะเริ่มต้นด้วยสีพื้นหลังเริ่มต้น darkslategray
และใช้ backdrop-filter
เพื่อกลับสีหลังจากการเปลี่ยนรูปแบบ
.container::before {
z-index: 1;
background-color: darkslategray;
filter: invert(1);
}
.container::after {
backdrop-filter: invert(1);
z-index: 3;
}
บทสรุป
พวกคุณมากกว่า 560 คนได้โหวตเห็นด้วยกับข้อบกพร่องของ Chromium ในช่วง 2-3 ปีที่ผ่านมา โดยทำเครื่องหมายอย่างชัดเจนว่าฟีเจอร์นี้เป็นฟีเจอร์ CSS ที่รอคอยมานาน การเปิดตัว backdrop-filter
ของ Chrome ในเวอร์ชัน 76 ทำให้เว็บเข้าใกล้การนำเสนอ UI ที่เหมือนกับระบบปฏิบัติการอย่างแท้จริงมากขึ้นอีกขั้น