ฟังก์ชัน blur() ของ CSS

คำอธิบายและการใช้งาน

ฟังก์ชัน blur() ของ CSS blur() ฟังก์ชันฟิลเตอร์ใช้สร้างภาพมัวสำหรับองค์ประกอบ

ถ้าไม่ได้ระบุค่า จะใช้ค่าเริ่มต้น 0

ตัวอย่าง

ตัวอย่าง 1

ใช้ฟังก์ชันมัวที่แตกต่างกันสำหรับองค์ประกอบ <h1> และ <img>:

h1 {
  filter: blur(2px);
}
#img1 {
  filter: blur(2px);
}
#img2 {
  filter: blur(6px);
}

ทดลองด้วยตัวเอง

ตัวอย่าง 2

สร้างภาพ배รองที่มีภาพมัว:

img.background {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
  filter: blur(35px);
}

ทดลองด้วยตัวเอง

CSS ภาษา

blur(radius)
ค่า บรรณาธิการ
radius

ตัวเลือก

ถ้าไม่ได้ระบุค่า จะใช้ค่าเริ่มต้น 0 (ไม่มีผล)

รายละเอียดเทคโนโลยี

รุ่น: CSS Filter Effects Module Level 1

การสนับสนุนโปรแกรมบราวเซอร์

ตัวเลขในตารางนี้แสดงความเป็นจริงของสัปดาห์ที่บราวเซอร์สนับสนุนฟังก์ชันนี้ครบถ้วน

Chrome Edge Firefox Safari Opera
18 12 35 6 15

หน้าที่เกี่ยวข้อง

อ้างอิง:CSS ตัวกรอง

อ้างอิง:CSS brightness() function

อ้างอิง:ฟังก์ชัน contrast() ของ CSS

อ้างอิง:ฟังก์ชัน drop-shadow() ของ CSS

อ้างอิง:ฟังก์ชัน grayscale() ของ CSS

อ้างอิง:ฟังก์ชัน hue-rotate() ของ CSS

อ้างอิง:ฟังก์ชัน invert() ของ CSS

อ้างอิง:ฟังก์ชัน opacity() ของ CSS

อ้างอิง:CSS saturate() function

อ้างอิง:CSS sepia() function