Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> CSS

สร้าง Image Filters ด้วย CSS

ใช้คุณสมบัติ filter เพื่อสร้างเอฟเฟกต์กรองภาพ เช่น blur, contrast, brightness

ตัวอย่าง

<!DOCTYPE html> <html>    <head>       <style>          img {             height: auto;             float: left;          }          .contrast {             -webkit-filter: contrast(180%);             filter: contrast(180%);          }          .brightness {             -webkit-filter: brightness(250%);             filter: brightness(250%);          }          .blur {             -webkit-filter: blur(4px);             filter: blur(4px);          }       </style>    </head>    <body>       <img       src = "https://www.tutorialspoint.com/assets/videos/courses/19/images/course_19_image.png" alt = "Animation Training" width = "200" height = "200">       <img class = "contrast"          src = "https://www.tutorialspoint.com/assets/videos/courses/19/images/course_19_image.png" alt = "Animation Training" width = "200" height = "200">       <img class = "brightness"          src = "https://www.tutorialspoint.com/assets/videos/courses/19/images/course_19_image.png" alt = "Animation Training" width = "200" height = "200">             <img class="blur"          src = "https://www.tutorialspoint.com/assets/videos/courses/19/images/course_19_image.png alt = "Animation Training" width = "200" height = "200">    </body> </html>