สร้างพื้นหลังแบบกระจกฝ้าด้วย CSS backdrop filter

tospichai

Posted on Jun 15, 2021

การทำให้ฉากหลังเบลอ แบบกระจกฝ้าด้วย CSS ด้วยการใช้ backdrop-filter เพื่อความสวยงามให้ Object ที่เราต้องการจะโชว์ โดยสวยยิ่งขึ้นเมื่อใช้ใน Modal หรือวัตถุที่อยู่เหนือวัตุอื่นอีกที เรามาดูกันเลย

หากเราใช้ background-color: rgba(0, 0, 0); ก็คงจะเป็นสีพื้นๆหรือหากใช้ background-color: rgba(0, 0, 0, 0.5); จะเพียงแต่ลดความสว่างของวัตถุของเรา ซึ่งจะเห็นพื้นหลังตามจำนวนเลขโดยจะอยู่ที่ 0-1 โดย 0 คือ ความสว่างของวัตถุน้อยที่สุด จะไม่เห็นวัตถุเลย หากเป็น 1 จะเห็นวัตถุ

สร้างพื้นหลังแบบกระจกฝ้าด้วย CSS backdrop-filter

หากเราใช้

background-color: rgba(0, 0, 0, 0.5);  
backdrop-filter: blur(10px);  
-webkit-backdrop-filter:blur(10px); //Safari

พื้นหลังก็จะเบลอโดยเราใช้สีดำ ก็คือ 0, 0, 0, ส่วน opacity คือ 0.5 หรือครึ่งนึง และด้านล่างคือจะเบลอวัตถุ 10px

ที่เราไม่ใช้ filter: blur(10px); เพราะจะทำให้เบลอทุกอย่างในวัตถุนั้น

สร้างพื้นหลังแบบกระจกฝ้าด้วย CSS backdrop-filter