Theo hiểu biết của tôi, đáng buồn là không có bộ lọc CSS để tô màu cho một phần tử [có lẽ với việc sử dụng một số phép thuật bộ lọc SVG, nhưng tôi hơi không quen với điều đó] và ngay cả khi đó không phải là trường hợp, các bộ lọc về cơ bản chỉ được hỗ trợ bởi Trình duyệt Webkit.
Như đã nói, bạn vẫn có thể làm việc xung quanh việc này và sử dụng canvas
để sửa đổi hình ảnh của bạn. Về cơ bản, bạn có thể vẽ một phần tử hình ảnh lên một khung vẽ và sau đó lặp qua các pixel, sửa đổi các giá trị RGBA tương ứng thành màu bạn muốn.
Tuy nhiên, Canvase đi kèm với một số hạn chế. Quan trọng nhất, bạn phải đảm bảo rằng SRC hình ảnh đến từ cùng một miền với trang. Nếu không, trình duyệt sẽ không cho phép bạn đọc hoặc sửa đổi dữ liệu pixel của Canvas.
Đây là một JSfiddle thay đổi màu sắc của logo JSFiddle.
//Base64 source, but any local source will work
var src = "data:image/png;base64,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";
var canvas = document.getElementById["theCanvas"];
var ctx = canvas.getContext["2d"];
var img = new Image;
//wait for the image to load
img.onload = function[] {
//Draw the original image so that you can fetch the colour data
ctx.drawImage[img,0,0];
var imgData = ctx.getImageData[0, 0, canvas.width, canvas.height];
/*
imgData.data is a one-dimensional array which contains
the respective RGBA values for every pixel
in the selected region of the context
[note i+=4 in the loop]
*/
for [var i = 0; i < imgData.data.length; i+=4] {
imgData.data[i] = 255; //Red, 0-255
imgData.data[i+1] = 255; //Green, 0-255
imgData.data[i+2] = 255; //Blue, 0-255
/*
imgData.data[i+3] contains the alpha value
which we are going to ignore and leave
alone with its original value
*/
}
ctx.clearRect[0, 0, canvas.width, canvas.height]; //clear the original image
ctx.putImageData[imgData, 0, 0]; //paint the new colorised image
}
//Load the image!
img.src = src;
body {
background: green;
}
Cách để - hình ảnh đen trắng
Tìm hiểu cách tạo hình ảnh "đen trắng" với CSS.
Hình ảnh đen và trắng
Ảnh gốc
grayscale[100%]
Sử dụng thuộc tính CSS filter
để chuyển đổi hình ảnh thành màu đen và trắng.
Ví dụ về thang độ xám
Thay đổi màu của tất cả các hình ảnh thành màu đen và trắng [100% xám]:
img {& nbsp; -webkit lọc: màu xám [100%]; / * Safari 6.0 - 9.0 */& nbsp; Bộ lọc: thang độ xám [100%];}
-webkit-filter: grayscale[100%]; /* Safari 6.0 - 9.0 */
filter: grayscale[100%];
}
Hãy tự mình thử »
Đi đến hướng dẫn hình ảnh CSS của chúng tôi để tìm hiểu thêm về cách tạo kiểu hình ảnh.
Truy cập thuộc tính Bộ lọc CSS của chúng tôi để tìm hiểu thêm về các bộ lọc CSS.