0Pricing
CSS Academy · บทเรียน

backdrop-filter สำหรับกระจกฝ้า

สร้างเอฟเฟกต์เบลอแบบกระจกฝ้าบนองค์ประกอบที่ซ้อนทับเนื้อหาอื่นด้วย backdrop-filter

backdrop-filter สำหรับกระจกฝ้า เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน

backdrop-filter คืออะไร

backdrop-filter ใช้เอฟเฟกต์กราฟิกกับพื้นที่ที่อยู่ด้านหลังองค์ประกอบ แทนที่จะใช้กับองค์ประกอบนั้นโดยตรง องค์ประกอบต้องมีความโปร่งใสบางส่วน (พื้นหลังที่มีค่า alpha น้อยกว่า 1 หรือไม่มีพื้นหลัง) เพื่อให้มองเห็นฉากหลังที่ผ่านการกรอง

เอฟเฟกต์กระจกฝ้า

รูปแบบกระจกฝ้าแบบคลาสสิก:

<div class="bg-wrapper">
  <div class="glass-card">Frosted Glass Card</div>
</div>

คำนำหน้า -webkit-backdrop-filter

Safari ต้องใช้คำนำหน้า -webkit-backdrop-filter โปรดใส่คำนำหน้านี้ควบคู่กับคุณสมบัติมาตรฐานเสมอเพื่อรองรับเบราว์เซอร์ต่าง ๆ

ฟังก์ชัน filter ที่ใช้ได้

backdrop-filter รองรับฟังก์ชันเดียวกับ filter ได้แก่ blur(), brightness(), contrast(), grayscale(), saturate(), hue-rotate(), sepia() และ drop-shadow()

<div class="bg-wrapper">
  <div class="modal-overlay"></div>
</div>

กระจกฝ้าสีเข้ม

รูปแบบสีเข้มสำหรับเลเยอร์ซ้อนและหน้าต่างโมดัล:

<div class="bg-wrapper">
  <div class="dark-glass">Dark Frosted Panel</div>
</div>

ข้อกำหนดของบริบทการซ้อน

backdrop-filter จะสร้างบริบทการซ้อน องค์ประกอบต้องถูกประกอบไว้ด้านบนของฉากหลัง ซึ่งหมายความว่าองค์ประกอบต้องอยู่เหนือเนื้อหาอื่นในลำดับการซ้อน (ไม่จำเป็นต้องใช้ z-index แต่ต้องอยู่ในลำดับการวาดที่เหมาะสม)

ประสิทธิภาพของ backdrop-filter

backdrop-filter: blur() ที่มีค่ามากใช้ทรัพยากรสูง เพราะบังคับให้เบราว์เซอร์เรนเดอร์พื้นหลังในการประมวลผลแยกต่างหาก สำหรับประสิทธิภาพบนอุปกรณ์เคลื่อนที่ ให้ใช้ค่าเบลอไม่เกิน 20px และหลีกเลี่ยงการใช้กับเนื้อหาที่ถูกวาดใหม่บ่อย ๆ

หน้าต่างโมดัลพร้อมเลเยอร์ซ้อนกระจกฝ้า

หน้าต่างโต้ตอบแบบโมดัลพร้อมเลเยอร์ซ้อนกระจกฝ้า:

<div class="modal-backdrop">
  <div class="modal">Modal Content</div>
</div>

แถบนำทางแบบติดค้างพร้อมเอฟเฟกต์กระจก

แถบนำทางแบบติดค้างที่มีเอฟเฟกต์กระจกฝ้า:

<div class="bg-wrapper">
  <nav class="navbar">Sticky Nav</nav>
</div>

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

backdrop-filter รองรับใน Chrome 76 ขึ้นไป Firefox 103 ขึ้นไป และ Safari 9 ขึ้นไป (webkit) โปรดใส่คำนำหน้า -webkit- เสมอ ตรวจสอบ caniuse.com เพื่อดูข้อมูลปัจจุบัน และจัดเตรียมทางเลือกสำรองแบบทึบแสงสำหรับเบราว์เซอร์ที่ไม่รองรับ

ทางเลือกสำรองแบบทึบแสง

จัดเตรียมพื้นหลังแบบทึบแสงเป็นทางเลือกสำรองสำหรับเบราว์เซอร์ที่ไม่รองรับ backdrop-filter:

<div class="bg-wrapper">
  <div class="glass">Fallback-aware glass panel</div>
</div>

ตรวจสอบความเข้าใจ

องค์ประกอบต้องมีอะไรจึงจะแสดง backdrop-filter ได้

สรุป

backdrop-filter ใช้เอฟเฟกต์ filter กับสิ่งที่อยู่ด้านหลังองค์ประกอบ องค์ประกอบต้องมีความโปร่งใสจึงจะแสดงเอฟเฟกต์ได้ กระจกฝ้าแบบคลาสสิกใช้ blur() + saturate() โปรดใส่ -webkit-backdrop-filter เสมอสำหรับ Safari และจัดเตรียมทางเลือกสำรองแบบทึบแสงโดยใช้ @supports

คำถามที่พบบ่อย

บทเรียน “backdrop-filter สำหรับกระจกฝ้า” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “backdrop-filter สำหรับกระจกฝ้า” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “backdrop-filter สำหรับกระจกฝ้า”

สร้างเอฟเฟกต์เบลอแบบกระจกฝ้าบนองค์ประกอบที่ซ้อนทับเนื้อหาอื่นด้วย backdrop-filter คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน

บทเรียน “backdrop-filter สำหรับกระจกฝ้า” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม

ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. filter: blur brightness contrast grayscale
  2. backdrop-filter สำหรับกระจกฝ้า
  3. mix-blend-mode สำหรับการผสมเลเยอร์
  4. คุณสมบัติ isolation
← กลับไปที่ CSS Academy