วิธีการ - เพิ่มเอฟเฟกต์รูปภาพ
เรียนรู้วิธีเพิ่มเอฟเฟกต์ภาพให้กับรูปภาพ
ฟิลเตอร์ภาพ
ตัวกรอง CSS
คุณสมบัติ CSS filter
เพิ่มเอฟเฟกต์ภาพ (เช่น การเบลอและความอิ่มตัวของสี) ให้กับองค์ประกอบ
หมายเหตุ:คุณสมบัติตัวกรองไม่ได้รับการสนับสนุนใน Internet Explorer, Edge 12 หรือ Safari 5.1 และรุ่นก่อนหน้า
ตัวอย่างระดับสีเทา
เปลี่ยนสีของภาพทั้งหมดเป็นขาวดำ (สีเทา 100%):
img {
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}
Original image
grayscale(100%)
ตัวอย่างเบลอ
ใช้เอฟเฟกต์เบลอกับภาพทั้งหมด:
img {
-webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */
filter: blur(5px);
}
Original image
blur(5px)
ไปที่คุณสมบัติตัวกรอง CSSเพื่อเรียนรู้เพิ่มเติมเกี่ยวกับตัวกรอง CSS