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

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

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

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

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

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

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

การรองรับเบราว์เซอร์

  • 76
  • 79
  • 103
  • 9

แหล่งที่มา

เพื่อเหตุผลด้านประสิทธิภาพ ให้กลับไปใช้รูปภาพแทน 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);
}
ลองดูตัวอย่างนี้ด้วยตัวคุณเองใน CodePen

หลายตัวกรอง

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

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

ในตัวอย่างต่อไปนี้ แต่ละแผงจาก 4 บานจะมีชุดค่าผสมของฟิลเตอร์ฉากหลังที่แตกต่างกัน ในขณะที่รูปร่างชุดเดียวกันนั้นเคลื่อนไหวด้านหลังภาพเหล่านั้น

ลองตัวอย่างนี้ด้วยตัวคุณเองใน 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 ในCodrops

บทสรุป

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

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