Convert ảnh thành đen trắng với CSS3 filter

06/05/2020

Convert ảnh thành đen trắng với CSS3 filter

Bài hướng dẫn này tôi sẽ giới thiệu với các bạn cách biến bức ảnh màu thành ảnh đen trắng bằng CSS3 filter, cái mà trước đây ta chỉ có thể làm bằng photoshop.

Để biến một bức ảnh màu thành đen trắng ta sử dụng code css sau :

img { filter: grayscale(100%); }

Với các thuộc tính css3 hiện nay ta đều phải sử dụng mã mặc định của trình duyệt.

img{
filter : grayscale(100%);
-moz-filter: grayscale(100%);
-webkit-filter:grayscale(100%);
-ms-filter:grayscale(100%);
-o-filter:grayscale(100%);
}

Tuy nhiên CSS3 filter tại thời điểm tôi viết bài này chỉ hỗ trợ Chrome 18+, nhưng ta có thể thêm file đuôi svg để firefox 4+ và IE cũng hỗ trợ thuộc tính này. Ta copy đoạn code sau vào trình soạn thảo(notepad chẳng hạn) và save với tên filter.svg.

Sau đó sử dụng mã css trên cộng thêm đường dẫn của file filter.svg.

img{
filter : grayscale(100%);
-moz-filter: grayscale(100%);
-webkit-filter:grayscale(100%);
-ms-filter:grayscale(100%);
-o-filter:grayscale(100%);
filter: url(filter.svg#greyscale); /* thêm đường dẫn của file filter.svg */
filter: gray; /* code để hỗ trợ IE */
}

Chúc bạn thành công!