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 จะเห็นวัตถุ
หากเราใช้
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);
เพราะจะทำให้เบลอทุกอย่างในวัตถุนั้น
tospichai
Hey! 👋 I'm a Back-End Developer.
I graduated with a bachelor's degree in Finance from Kasetsart university.
I created a blog to share my knowledge with everyone.
In the future I will let everyone share their knowledge on my blog.
Thailand, Bangkok
workBack-End Web Developer
joinedMay 22, 2021