Flood color Not observed in a specific image.

Question

So, I'm trying to use a filter on an image on an HTML page so as to overlay an image with a specific color. My sample image is white:

img { filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><defs><filter id='bronzo-filter'><feColorMatrix type='luminanceToAlpha' result='L2A'/><feFlood flood-color='green' result='colorfield'/><feBlend mode='multiply' in='L2A' in2='colorfield'/><feComposite operator='in' in2='SourceGraphic'/></filter></defs></svg>#bronzo-filter"); } 

 <img src="https://i.stack.imgur.com/K8CIc.png"> 

It seems that the result is always a black image, even if the fill color is indicated as blue. Is it because only a gray image will work properly for such a filtering overlay?

On the other hand, for this image, it seems that the fill color is respected with the same filter. The question I want to answer is why.

 img { filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><defs><filter id='bronzo-filter'><feColorMatrix type='luminanceToAlpha' result='L2A'/><feFlood flood-color='green' result='colorfield'/><feBlend mode='multiply' in='L2A' in2='colorfield'/><feComposite operator='in' in2='SourceGraphic'/></filter></defs></svg>#bronzo-filter"); } 

 <img src="http://via.placeholder.com/350x150"> 

I tried with the third image, a gray version of the first in #aaaaaa. He seems to respect the color of the floods. Here is the third attempt:

 img { filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><defs><filter id='bronzo-filter'><feColorMatrix type='luminanceToAlpha' result='L2A'/><feFlood flood-color='green' result='colorfield'/><feBlend mode='multiply' in='L2A' in2='colorfield'/><feComposite operator='in' in2='SourceGraphic'/></filter></defs></svg>#bronzo-filter"); } 

 <img src="https://i.stack.imgur.com/V4gGT.png" /> 

After some testing, I realized that the colors of the flood can simply be specified through rgb, for example rgb (208,164,114); This still does not answer the question of why the white image is always black and the other color #aaaaaa always respect the color of the flood.

Answer 1

luminanceToAlpha converts the original image into a solid black image with different transparency, it literally converts brightness into alpha values ​​and zeros from regular color channels.

For your white image, it converts it to a solid black image (rgb 0,0,0) with 100% opacity. When you multiply something with 0, you get 0. Therefore, when you multiply it with any fill color, you turn black.

For other non-white images, the filter converts them to partially transparent black images. When they reach the blending step, they are pre-multiplied by fully opaque shades of gray before being multiplied by the background color, so you see the color of the flood.

For your case of using white images, you do not want to use L2A, you just need to just multiply.

 <svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'> <defs> <filter id='bronzo-filter'> <feFlood flood-color='green' result='colorfield'/> <feBlend mode='multiply' in='SourceGraphic' in2='colorfield'/> <feComposite operator='in' in2='SourceGraphic'/> </filter> </defs> </svg>