Вы не можете сделать это в простом HTML или CSS.Вы можете сделать это с помощью JS / HTML Canvas, но, вероятно, существует гораздо более простое и совместимое решение, чем JS / HTML Canvas для выполнения операций с изображениями.
В зависимости от того, что вы пытаетесь сделать, вы можете просто захотеть создать второе изображение, которое вы поменяете местами с первым.Есть также несколько достойных пакетов для работы с изображениями на серверных языках, таких как PHP, если вам нужно сделать что-то более динамичное.
Если вы используете js, приведенный ниже код будет изменен с вашего примера .
Используя ваш пример:
window.onload = function(){
var imageObj = new Image();
imageObj.onload = function(){
drawImage(this);
};
imageObj.src = "darth-vader.jpg";
};
function drawImage(imageObj){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var destX = 69; //update these to set the image position
var destY = 50;
context.drawImage(imageObj, destX, destY);
var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
var data = imageData.data;
for (var i = 0, n = data.length; i < n; i += 4) {
if(data[i] == 0 && data[i+1] == 0 && data[i+2] ==0){ //if black, ie. red, green, and blue are all 0
//switch to white
data[i] = 255; //red
data[i+1] = 255; //green
data[i+2] = 255; //blue
}
// i+3 is alpha (the fourth element)
}
// overwrite original image
context.putImageData(imageData, 0, 0);
}