Html, icon respecting page background color

Question

I am inserting on 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 this drawing to be filled with the same color of 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" />

Answer 1

Thanks for the answers, guys. The best option I could find 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>

I appreciate all your help. Att

Answer 2

This case has nothing to do with HTML - you need to edit the image so it has a transparent background.

If you treat the image in GIMP, you can open the file, go to Camada->Adicionar canal alfa, take the color selection tool (in the GIMO default setting, it’s the fifth tool in the tool box),click on the white background, and go to editar->cortar, and finally export the resulting image. Use this on your page.

(The answer is O.T. no stackoverflow - but the doubt happened in the scope of HTML. In English websites this type of answer is in https://graphicdesign.stackexchange.com/)

Answer 3

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 would the background be transparent, but any white part of the image.

If you find it valid to apply the following script to your code (instead of using a graphical application to remove the background of your icon in question), follow it:

HTML:

The image and the canvas should 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:

1. The image must be in the same domain.
2. Only works in browsers with HTML5 support (more browsers modern).