วิธีการ - เพิ่มผลภาพ

เรียนรู้วิธีการเพิ่มเอฟเฟ็กให้กับภาพ

กรอง CSS

ซีเอสเอ filter คุณสมบัติเพิ่มผลภาพ (like blur and saturation) จะองค์ประกอบ

หมายเหตุ: ตัวกรองคุณสมบัติไม่สนับสนุนใน Internet Explorer, ขอบ 12 หรือ Safari 5.1 และก่อนหน้านี้

ตัวอย่างสีเทา

เปลี่ยนสีของภาพทั้งหมดเป็นสีดำและสีขาว (100% gray) :

img {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}

Original image

grayscale(100%)

ลองตัวเอง»

ตัวอย่างเบลอ

ใช้ผลเบลอให้ภาพทั้งหมด:

img {
    -webkit-filter: blur(5px); /* Chrome, Safari, Opera */
    filter: blur(5px);
}

Original image

blur(5px)

ลองตัวเอง»

ไปที่เรา CSS filter Property เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับตัวกรอง CSS