I'm inserting in my page an image that has an event, this image has a drawing, and the background of the drawing is white, I would like this background of that drawing to be filled with the same color as the page.
The page is gray, but the drawing has a white background, I wish it had the same color as the page, follow the code.
<img src="${pageContext.request.contextPath}/static/img/menuicon.png" />
This case has nothing to do with HTML - you need to edit the image so that it has a transparent background.
If you treat the image in GIMP, you can open the file, go to Camada->Adicionar canal alfa , get the color selection tool (in the default GIMO configuration, it's the fifth tool in the toolbox), click on the white background , and go to editar->cortar , and finally, export the resulting image. Use this on your page.
(The answer is OT in stackoverflow - but the doubt happened in the context of HTML.) In English websites, this type of response is in the link )
There is a way to make a specific color of an image transparent using canvas . In your case, the image has a white background, so with canvas , not only the background would be transparent, but any white part of the image.
If you find it valid to apply the script below in your code (instead of using a graphics application to remove the background of your icon in question), follow it:
HTML:
The image and canvas must be in the same div :
<div>
<img id="fundobranco" src="imagem.png" style="display: none;">
<canvas id="semfundobranco"></canvas>
</div>
Script:
<script>
window.onload = function(){
id_imagem = "fundobranco"; // id da imagem
largura_imagem = 400; // width da imagem
altura_imagem = 400; // height da imagem
var canvas = document.getElementById("semfundobranco"),
ctx = canvas.getContext("2d"),
image = document.getElementById(id_imagem);
canvas.height = altura_imagem; canvas.width = largura_imagem;
ctx.drawImage(image,0,0);
var imgd = ctx.getImageData(0, 0, largura_imagem, altura_imagem),
pix = imgd.data,
newColor = {r:0,g:0,b:0, a:0};
for(var i = 0, n = pix.length; i <n; i += 4){
var r = pix[i],
g = pix[i+1],
b = pix[i+2];
if(r== 255 && g == 255 && b == 255){
pix[i] = newColor.r;
pix[i+1] = newColor.g;
pix[i+2] = newColor.b;
pix[i+3] = newColor.a;
}
}
ctx.putImageData(imgd, 0, 0);
}
</script>
Notes:
The image must be in the same domain. Only works with browsers with HTML5 support (older browsers modern).
Thanks for the replies people. The best option I found was this one:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<i class="fa fa-bars" aria-hidden="true"></i>
Thank you for your help. Att