CSS ตัวกรอง

  • เพจที่แล้ว empty-cells
  • หน้าต่อไป flex

定义和用法

filter 属性定义元素（通常是 <img>）的视觉效果（如模糊和饱和度）。

另请参阅：

CSS 教程：CSS 图像

HTML DOM 参考手册：filter 属性

实例

把所有图像都改为黑白（100% 灰色）：

img {
  filter: grayscale(100%);
}

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

คำแนะนำ:可以在页面下方找到更多 TIY 实例。

CSS 语法

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

คำแนะนำ:ถ้าต้องการใช้ filter หลายรายการ ใช้ช่องว่างแยก filter ต่าง ๆ (ดูตัวอย่างเพิ่มเติมที่ด้านล่างหน้า)

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

ค่าเริ่มต้น: none
การสืบทอด: ไม่
การสร้างอนุรักษ์: สนับสนุน: โปรดดู:property ที่เกี่ยวกับอนุรักษ์。
เวอร์ชั่น: CSS3
การใช้งาน JavaScript: object.style.filter="grayscale(100%)"

filter function

หมายเหตุ：ใช้ร้อยละค่า (เช่น 75%) สำหรับ filter และยอมรับค่าเป็นเซนติเมตร (เช่น 0.75)

filter คำอธิบาย
none ค่าเริ่มต้น
blur(px)

ปรับปรุงภาพด้วยฤทธิ์มัวมัน ค่าที่ใหญ่ขึ้นจะทำให้มัวมันมากขึ้น

ถ้ากำหนดค่า ใช้ 0
brightness(%)

ปรับปรุงความสว่างของภาพ

  • 0% จะทำให้ภาพมืดทั้งหมด
  • ค่าเริ่มต้นคือ 100% ที่แสดงภาพต้นฉบับ
  • ค่าที่เกิน 100% จะให้ผลลัพธ์ที่สว่างขึ้น
contrast(%)

ปรับปรุงความเปรียบเทียบของภาพ

  • 0% จะทำให้ภาพมืดทั้งหมด
  • ค่าเริ่มต้นคือ 100% ที่แสดงภาพต้นฉบับ
  • ค่าที่เกิน 100% จะให้ผลลัพธ์ที่มีความเปรียบเทียบที่ดีขึ้น
drop-shadow(h-shadow v-shadow blur spread color)

ปรับปรุงภาพด้วยเงา

ค่าที่เป็นไปได้:

  • h-shadow - จำเป็น (required). กำหนดค่า pixel สำหรับเงาทิศทางน้ำตก
  • v-shadow - จำเป็น (required). กำหนดค่า pixel สำหรับเงาทิศทางตั้งฝั่ง

blur - แบบเลือก (optional). นี่คือค่าที่ 3 ของเงา หน่วยความยาวต้องใช้ pixel ใส่ฤทธิ์มัวมันสำหรับเงา ค่าที่ใหญ่ขึ้นจะทำให้เงามัวมันมากขึ้น (เงาจะมีขนาดใหญ่และสว่างขึ้น) ไม่อนุญาตให้มีค่าลบ ถ้าไม่กำหนดค่า จะใช้ 0 (ขอบเงาจะมีขนาดชัดเจน)

spread - แบบเลือก (optional). นี่คือค่าที่ 4 ของเงา หน่วยความยาวต้องใช้ pixel ค่าบวกจะทำให้เงาขยายตัวและขยายตัว ค่าลบจะทำให้เงาลดลง ถ้าไม่กำหนดค่า จะใช้ 0 (เงาจะมีขนาดเท่ากับขนาดขององค์ประกอบ)

หมายเหตุ：Chrome และ Safari และ Opera อาจมีเวิร์ชั่ร์อื่น ๆ ที่ไม่สนับสนุนความยาวที่ 4 ของเงา；ถ้าเพิ่ม จะไม่แสดงขึ้น

color - แบบเลือก (optional). ใส่สีสำหรับเงา。ถ้าไม่กำหนด สีของเงาขึ้นอยู่กับเวิร์ชั่ร์ (ส่วนใหญ่เป็นสีดำ)

นี่คือตัวอย่างที่สร้างเงาสีแดง ทั้งทิศทางน้ำตกและทิศทางตั้งฝั่ง 8px และมีฤทธิ์มัวมัน 10px:

filter: drop-shadow(8px 8px 10px red);

คำแนะนำ:ฟิลเตอร์นี้คล้ายคุณสมบัติ box-shadow
grayscale(%)

เปลี่ยนภาพเป็นกรายสี

  • 0% (0) คือค่าเริ่มต้น นำเสนอภาพต้นแบบ
  • 100% จะทำให้ภาพเปลี่ยนเป็นขาวดำทั้งหมด (สำหรับภาพขาวดำ)

หมายเหตุ：ไม่อนุญาตให้มีค่าลบ
hue-rotate(deg)

ปรับปรุงทอนสีของภาพ ค่านี้กำหนดองศาของวงโคจรสี ค่าเริ่มต้นคือ 0deg นำเสนอภาพต้นแบบ

หมายเหตุ：ค่าสูงสุดคือ 360deg
invert(%)

กลับภาพตัวอย่าง

  • 0% (0) คือค่าเริ่มต้น นำเสนอภาพต้นแบบ
  • 100% จะทำให้ภาพเปลี่ยนแปลงครบทั้งหมด

หมายเหตุ：ไม่อนุญาตให้มีค่าลบ
opacity(%)

ตั้งค่าระดับโปร่งใสของภาพ ความโปร่งใส ระบุระดับโปร่งใส ในที่นี้:

  • 0% คือทราบความโปร่งใสทั้งหมด
  • 100% (1) คือค่าเริ่มต้น นำเสนอภาพต้นแบบ (โดยไม่มีความโปร่งใส)

หมายเหตุ：ไม่อนุญาตให้มีค่าลบ

คำแนะนำ:ฟิลเตอร์นี้คล้ายคุณสมบัติ opacity
saturate(%)

ตั้งค่าความเปราะบางของภาพ

  • 0% (0) จะทำให้ภาพไม่มีความเปราะบาง
  • 100% คือค่าเริ่มต้น นำเสนอภาพต้นแบบ
  • ค่าเกิน 100% จะให้ผลที่เกินความเปราะบาง

หมายเหตุ：ไม่อนุญาตให้มีค่าลบ
sepia(%)

เปลี่ยนภาพเป็นน้ำเงินน้ำตาล

  • 0% (0) คือค่าเริ่มต้น นำเสนอภาพต้นแบบ
  • 100% จะทำให้ภาพเป็นน้ำเงินน้ำตาลทั้งหมด

หมายเหตุ：ไม่อนุญาตให้มีค่าลบ
url();

ฟังก์ชัน url() รับสถานที่ของแบบแบ่งปัน SVG ฟิลเตอร์ XML และสามารถมีหลายตัวชื่อโดยอ้างอิงไปยังองค์ประกอบฟิลเตอร์เฉพาะ ตัวอย่าง:

filter: url(svg-url#element-id);
initial ตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น ดู initial。
inherit ขอรับมาจากตัวปลอมขององค์ประกอบต้นนี้ ดู inherit。

ตัวอย่างเพิ่มเติม

ตัวอย่าง

เพิ่มประสาทมัวงสำหรับภาพ:

img {
  filter: blur(5px);
}

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

ตัวอย่างที่ 2

ปรับใช้ภาพเบิร์นที่มีความมืด:

img.background {
  filter: blur(35px);
}

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

ตัวอย่างของความสว่าง

ปรับปรุงความสว่างของภาพ:

img {
  filter: brightness(200%);
}

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

ตัวอย่างของความเปราะบาง

ปรับปรุงความเปราะบางของภาพ:

img {
  filter: contrast(200%);
}

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

ตัวอย่างของเงา

ปรับใช้เงาสำหรับภาพรวม:

img {
  filter: drop-shadow(8px 8px 10px gray);
}

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

ตัวอย่างชั้นดำขาว

เปลี่ยนภาพเป็นชั้นดำขาว:

img {
  filter: grayscale(50%);
}

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

ตัวอย่างหมุนฟางทางสี

ใช้การหมุนฟางทางสีในภาพ:

img {
  filter: hue-rotate(90deg);
}

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

ตัวอย่างปรับผัน

ปรับผันตัวอย่างในภาพ:

img {
  filter: invert(100%);
}

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

ตัวอย่างโดยสีขาว

ตั้งระดับโดยสีขาวของภาพ:

img {
  filter: opacity(30%);
}

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

ตัวอย่างความสมบูรณ์

ปรับความสมบูรณ์ของภาพ:

img {
  filter: saturate(800%);
}

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

ตัวอย่างสีน้ำตาลน้ำตาล

เปลี่ยนภาพเป็นสีน้ำตาลน้ำตาล:

img {
  filter: sepia(100%);
}

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

ใช้ฟิลเตอร์หลายรายการ

เพื่อใช้ฟิลเตอร์หลายรายการ ใช้สัญญาณช่องว่างแบ่งระหว่างฟิลเตอร์แต่ละรายการ โปรดจำเป็นต้องระวังลำดับที่เรียง (ตัวอย่างเช่น การใช้ grayscale() หลัง sepia() จะสร้างภาพที่เป็นขาวเทาทั้งหมด)

img {
  filter: contrast(200%) brightness(150%);
}

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

ฟิลเตอร์ทั้งหมด

แสดงทั้งหมดฟิลเตอร์ฟังก์ชัน:

.blur {
  filter: blur(4px);
}
.brightness {
  filter: brightness(0.30);
}
.contrast {
  filter: contrast(180%);
}
.grayscale {
  filter: grayscale(100%);
}
.huerotate {
  filter: hue-rotate(180deg);
}
.invert {
  filter: invert(100%);
}
.opacity {
  filter: opacity(50%);
}
.saturate {
  filter: saturate(7);
}
.sepia {
  filter: sepia(100%);
}
.shadow {
  filter: drop-shadow(8px 8px 10px green);
}

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

การสนับสนุนโดยเบราเซอร์

ตัวเลขในตารางบ่งชี้รุ่นการเบราเซอร์ที่สนับสนุนคุณสมบัตินี้อย่างเต็มที่

ตัวเลขที่มี -webkit- หมายถึงรุ่นที่ใช้รหัสหลักสูตรสำหรับตัวเลขแรก

Chrome IE / Edge Firefox Safari Opera
53.0
18.0 -webkit-		 13.0 35.0 9.1
6.0 -webkit-		 40.0
15.0 -webkit-

หมายเหตุ：การใช้งานของ Internet Explorer รุ่นเก่า (4.0 ถึง 8.0) สนับสนุนคุณสมบัติ 'filter' ที่ไม่เป็นมาตรฐานตามมาตราฐานอุปกรณ์เครื่องคอมพิวเตอร์。เมื่อต้องการสนับสนุน IE8 และรุ่นต่ำกว่านั้น จะถูกใช้สำหรับความเป็นโต้นสีขาว

  • เพจที่แล้ว empty-cells
  • หน้าต่อไป flex