การเบลอและการเปลี่ยนสีหลังองค์ประกอบ
ความโปร่งแสง การเบลอ และเอฟเฟกต์อื่นๆ เป็นวิธีที่เป็นประโยชน์ในการสร้างความลึกโดยที่ยังรักษาบริบทของเนื้อหาในเบื้องหลังไว้ เครื่องมือดังกล่าวรองรับการใช้งานในรูปแบบที่หลากหลาย เช่น กระจกน้ำแข็งเกาะ การวางซ้อนวิดีโอ ส่วนหัวการนำทางแบบโปร่งแสง การเซ็นเซอร์รูปภาพที่ไม่เหมาะสม การโหลดรูปภาพ และอื่นๆ คุณอาจรู้จักผลกระทบเหล่านี้จากระบบปฏิบัติการยอดนิยม 2 ระบบ ได้แก่ Windows 10 และ iOS
ในอดีต เทคนิคเหล่านี้นำมาใช้บนเว็บได้ยาก ซึ่งน้อยกว่าการแฮ็กหรือวิธีแก้ปัญหาเฉพาะหน้าที่สมบูรณ์แบบ ในช่วงไม่กี่ปีที่ผ่านมา ทั้ง Safari และ Edge ได้มอบความสามารถเหล่านี้ผ่านพร็อพเพอร์ตี้ background-filter
(หรืออาจเลือกใช้ -webkit-backdrop-filter
) ซึ่งจะผสมผสานสีพื้นหน้าและพื้นหลังแบบไดนามิกโดยอิงตามฟังก์ชันตัวกรอง ตอนนี้ Chrome รองรับ background-filter
โดยเริ่มตั้งแต่เวอร์ชัน 76 เป็นต้นไป
การสนับสนุนเบราว์เซอร์
เพื่อเหตุผลด้านประสิทธิภาพ ให้กลับไปใช้รูปภาพแทน Polyfill เมื่อไม่รองรับ backdrop-filter
ตัวอย่างด้านล่างแสดงข้อมูลนี้
@supports (backdrop-filter: none) {
.background {
backdrop-filter: blur(10px);
}
}
@supports not (backdrop-filter: none) {
.background {
background-image: blurred-hero.png;
}
}
พื้นฐาน
- พร็อพเพอร์ตี้
backdrop-filter
ใช้ตัวกรองอย่างน้อย 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);
}
ในตัวอย่างต่อไปนี้ แต่ละแผงจาก 4 บานจะมีชุดค่าผสมของฟิลเตอร์ฉากหลังที่แตกต่างกัน ในขณะที่รูปร่างชุดเดียวกันนั้นเคลื่อนไหวด้านหลังภาพเหล่านั้น
การวางซ้อน
ตัวอย่างนี้แสดงวิธีเบลอพื้นหลังกึ่งโปร่งใสเพื่อให้ข้อความสามารถอ่านได้ในขณะที่กลมกลืนไปกับพื้นหลังของหน้าเว็บ
.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;
}
บทสรุป
ในช่วง 2-3 ปีที่ผ่านมา คุณมากกว่า 560 คนได้โหวตเพิ่มข้อบกพร่องของ Chromium ในช่วง 2-3 ปีที่ผ่านมา ซึ่งถือว่านี่เป็นฟีเจอร์ CSS ที่รอคอยมานาน การเปิดตัว backdrop-filter
ของ Chrome ในเวอร์ชัน 76 ทำให้เว็บเข้าใกล้การนำเสนอ UI ที่เหมือนกับระบบปฏิบัติการอย่างแท้จริงไปอีกขั้น