สร้างพื้นหลังสไตล์ระบบปฏิบัติการด้วยฟิลเตอร์ฉากหลัง

การเบลอและการเปลี่ยนสีด้านหลังองค์ประกอบ

อัครเดช ชัยดี
โจ เมดเลย์
โจ เมดเลย์
GitHub
ความโปร่งแสง การเบลอ และเอฟเฟกต์อื่นๆ คือวิธีที่เป็นประโยชน์ในการสร้างความลึกและยังคงรักษาบริบทของเนื้อหาในพื้นหลังเอาไว้ โซลูชันเหล่านี้รองรับกรณีการใช้งานที่หลากหลาย เช่น กระจกฝ้า การวางซ้อนวิดีโอ ส่วนหัวการนำทางแบบโปร่งแสง การเซ็นเซอร์รูปภาพที่ไม่เหมาะสม การโหลดรูปภาพ และอื่นๆ คุณอาจจำผลกระทบเหล่านี้ได้จากระบบปฏิบัติการยอดนิยม 2 ระบบ ได้แก่ Windows 10 และ iOS

ตัวอย่างเอฟเฟกต์กระจกน้ำแข็งเกาะ
ตัวอย่างเอฟเฟกต์กระจกฝ้า แหล่งที่มา

ก่อนหน้านี้ เทคนิคเหล่านี้นำมาใช้ได้ยากบนเว็บ ซึ่งต้องใช้การแฮ็กหรือวิธีแก้ไขเบื้องต้นที่ไม่สมบูรณ์แบบ ในช่วงไม่กี่ปีที่ผ่านมา ทั้ง Safari และ Edge ได้มอบความสามารถเหล่านี้ผ่านพร็อพเพอร์ตี้ background-filter (หรือ -webkit-backdrop-filter) ซึ่งจะผสมผสานสีพื้นหน้าและสีพื้นหลังแบบไดนามิกโดยอิงตามฟังก์ชันตัวกรอง ตอนนี้ Chrome รองรับ background-filter ตั้งแต่เวอร์ชัน 76 เป็นต้นไป

การสาธิตฟังก์ชันตัวกรองสำหรับ backdrop-filter ลองดูตัวอย่างใน CodePen

การสนับสนุนเบราว์เซอร์

การสนับสนุนเบราว์เซอร์

  • 76
  • 17
  • 103
  • 9

แหล่งที่มา

เมื่อระบบไม่รองรับ 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);
}
ลองดูตัวอย่างนี้ด้วยตัวเองใน CodePen

ตัวกรองหลายรายการ

บางครั้งคุณอาจต้องใช้ตัวกรองหลายรายการเพื่อให้ได้ผลลัพธ์ที่ต้องการ โดยให้แสดงรายการตัวกรองโดยคั่นด้วยเว้นวรรค เช่น

.brighten-saturate-and-blur-behind-me {
  backdrop-filter: brightness(150%) saturate(150%) blur(1rem);
}

ในตัวอย่างต่อไปนี้ แต่ละแผงมีฟิลเตอร์ฉากหลังต่างกัน แต่มีรูปร่างชุดเดียวกันเคลื่อนไหวอยู่ด้านหลัง

ลองดูตัวอย่างนี้ด้วยตัวคุณเองใน CodePen

การวางซ้อน

ตัวอย่างนี้แสดงวิธีเบลอพื้นหลังกึ่งโปร่งใสเพื่อทำให้ข้อความอ่านง่ายและกลมกลืนไปกับพื้นหลังของหน้าเว็บ

.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;
}
ลองดูตัวอย่างนี้จาก Chen Hui Jing ใน Codrop

บทสรุป

พวกคุณมากกว่า 560 คนได้โหวตเห็นด้วยกับข้อบกพร่องของ Chromium ในช่วง 2-3 ปีที่ผ่านมา โดยทำเครื่องหมายอย่างชัดเจนว่าฟีเจอร์นี้เป็นฟีเจอร์ CSS ที่รอคอยมานาน การเปิดตัว backdrop-filter ของ Chrome ในเวอร์ชัน 76 ทำให้เว็บเข้าใกล้การนำเสนอ UI ที่เหมือนกับระบบปฏิบัติการอย่างแท้จริงมากขึ้นอีกขั้น

แหล่งข้อมูลเพิ่มเติม