วิธีสร้างรูปภาพขาวดำ (Black & White Image) ด้วย CSS Filter

ใช้ CSS filter: grayscale(100%) ทำให้รูปภาพสีกลายเป็นขาวดำทันที ไม่ต้องแก้ไขรูปต้นฉบับ

ตัวอย่างโค้ด

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> img{    margin: 20px; } img.normal{    margin-left: 30%;    width: 300px;    height: 300px; } img.filter {    width: 300px;    height: 300px;    filter: grayscale(100%); } </style> </head> <body> <h1 style="text-align: center;">CSS Black and White Image example</h1> <img class="normal" src="https://i.picsum.photos/id/59/500/500.jpg"> <img class="filter" src="https://i.picsum.photos/id/59/500/500.jpg"> </body> </html>

CSS Filter: grayscale()

• grayscale(0%) - สีปกติ (Default)
• grayscale(50%) - ครึ่งสี ครึ่งขาวดำ
• grayscale(100%) - ขาวดำสมบูรณ์
• รองรับ Transition: transition: filter 0.3s; ทำ Hover Effect ได้

img.filter {
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}
img.filter:hover {
  filter: grayscale(0%);
}