CSS фильтр: сделать цветное изображение с прозрачностью белого цвета

У меня есть цветное изображение png с прозрачностью. Я хотел бы использовать css-фильтр, чтобы сделать все изображение белым, но оставить прозрачность как есть. Это возможно в CSS?

2 64
css css-filters

2 ответа:

можно использовать

filter: brightness(0) invert(1);


html {
  background: red;
}
p {
  float: left;
  max-width: 50%;
  text-align: center;
}
img {
  display: block;
  max-width: 100%;
}
.filter {
  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);
}
<p>
  Original:
  <img src="http://i.stack.imgur.com/jO8jP.gif" />
</p>
<p>
  Filter:
  <img src="http://i.stack.imgur.com/jO8jP.gif" class="filter" />
</p>

первый, brightness(0) делает все изображение черным, за исключением прозрачных частей, которые остаются прозрачными.

затем, invert(1) делает черные части белыми.

209

насколько мне известно, к сожалению, нет фильтра CSS для раскрашивания элемента (возможно, с использованием некоторой магии фильтра SVG, но я несколько незнаком с этим), и даже если это не так, фильтры в основном поддерживаются только браузерами webkit.

С учетом сказанного, вы все еще можете обойти это и использовать canvas для изменения изображения. В принципе, вы можете нарисовать элемент изображения на холсте, а затем выполнить цикл по пикселям, изменив соответствующие значения RGBA на цвет вы хотите.

однако, холсты приходят с некоторыми ограничениями. Самое главное, вы должны убедиться, что изображение src происходит из того же домена, что и страница. В противном случае браузер не позволит вам читать или изменять данные пиксел холста.

здесь JSFiddle изменение цвета логотипа 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;
}
<canvas id="theCanvas"></canvas>
5