การใช้ backdrop-filter เพื่อสร้างฉากหลังแบบกระจกฝ้าใน CSS

Nuttavut Thongjor

CSS

เรียนรู้การใช้งาน backdrop-filter เพื่อเบลอฉากหลังพร้อมทำพื้นหลังให้โปร่งใส

คำอธิบาย

ความคิดเห็น

สมมติเรามี modal ที่เด้งอยู่กลางจอ เราใส่ background-color: rgba(255, 255, 255, 0.4); เพื่อกำหนดให้ modal ของเรามีพื้นหลังเป็นสีขาวและโปร่งใส ผลลัพธ์ที่ได้จึงเป็นเช่นนี้

หากเราต้องการสร้างเอฟเฟกต์แบบกระจกฝ้าให้กับ modal เราสามารถใช้ backdrop-filter ได้

CSS

1backdrop-filter: blur(10px);

backdrop-filter จะทำการสร้างเอฟเฟกต์ตามที่เราระบุให้มีผลกับ ฉากหลัง ในตัวอย่างของเรา ระบุเป็น blur(10px) จึงเกิดการ blur ขึ้นที่ฉากหลังหรือใต้อีลีเมนต์ modal เป็นผลให้ภาพพื้นหลังถูก blur นั่นเอง สำหรับ backdrop-filter นั้นจะสร้างเอฟเฟกต์ไปยังฉากหลังที่อยู่ใต้อีลีเมนต์ที่ใช้งาน ถ้าอีลีเมนต์ modal ของเรา ไม่ทำการตั้งค่าพื้นหลังให้โปร่งใสก่อน ก็จะไม่สามารถมองเห็นเอฟเฟกต์ฉากหลังได้ ในตัวอย่างของเราจึงใส่ background-color: rgba(255, 255, 255, 0.4); เพื่อสร้างพื้นหลังให้โปร่งใสก่อนนั่นเอง

backdrop-filter นั้นแตกต่างจาก filter เพราะมันสร้างเอฟเฟกต์กับฉากหลัง ในขณะที่ filter จะสร้างเอฟเฟกต์ผูกไว้กับอีลีเมนต์ที่เรียกใช้ หากเราเปลี่ยนโค้ดข้างต้นของเราด้วยการใช้ filter แทน อีลีเมนต์ modal ของเราจะเป็นผู้ถูก blur แทน

CSS

1filter: blur(10px);

และเพื่อให้ backdrop-filter ใช้งานได้กับเบราเซอร์อย่าง Safari ด้วย เราต้องใส่ prefix คือ -webkit- ดังนี้

CSS

1-webkit-backdrop-filter: blur(10px);

ผลลัพธ์การทำงานที่สมบูรณ์

โค้ดผลลัพธ์ของการทำงานทั้งหมดเป็นดังนี้

HTML

1<div class="container">
2  <div class="modal">
3    <h2>เงื่อนไขการใช้งาน</h2>
4    <p class="terms">
5      ไลฟ์แบล็คสุริยยาตร์กับดัก พาร์ตเนอร์โครนาแอลมอนด์แพนงเชิญ กรีน
6      สแตนดาร์ดเทวาโรแมนติค สหรัฐวอฟเฟิลน้องใหม่ชนะเลิศเปโซ
7    </p>
8    <button type="button" class="accept-button">ตกลง</button>
9  </div>
10</div>

CSS

1html,
2body {
3  height: 100%;
4  width: 100%;
5  margin: 0;
6}
7
8.container {
9  display: flex;
10  justify-content: center;
11  align-items: center;
12  width: 100%;
13  height: 100%;
14  background-image: url(https://images.unsplash.com/photo-1553949345-eb786bb3f7ba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80);
15  background-position: center center;
16  background-repeat: no-repeat;
17  background-size: cover;
18}
19
20.modal {
21  max-width: 50%;
22  padding: 1rem 2rem;
23  -webkit-backdrop-filter: blur(10px);
24  backdrop-filter: blur(10px);
25  background-color: rgba(255, 255, 255, 0.4);
26  border-radius: 0.25rem;
27}
28
29.accept-button {
30  background-color: #00b894;
31  color: #fff;
32  border-radius: 0.25rem;
33  padding: 0.5rem 1rem;
34  border: none;
35  outline: none;
36}