添加带有html背景的透明图标

Question

I'm having trouble to place a transparent white envelope icon with a green background. I don't get what's happening because it worked fine with the telephone icon.

Side Question.: Any suggestion on what I should use as an html for something that is on top of the header? I had created the logo and the nav bar in the header and figured it was easier to create another session on top of it for the phone and e-mail but it's turning into a styling nightmare.

I've tried about 10 different pictures and none worked.

´´´

    <aside class="phone">
        <a href="mailto:cplusc@gmail.com"><img src="../C&C/img/kisspng-paper-black-and-white-envelope-5a7b1ac9f163b2.4908982415180172259887.jpg" width="18" height="18"> contador@gmail.com</a><a href="tel:+1-303-499-7111"><img src="../C&C/img/Call-Icon.png" width="18" height="18"> (303) 499-7111</a>
    </aside>


    <header>
        <div class="containerHeader">
          <div id="Branding">
            <img src="./img/logo.png.png">
          </div>
          <nav>
              <ul>
                  <li class="current"><a href="index.html">Home</a></li> <!––Current makes the current page have a different colour-->
                  <li><a href="quemsomos.html">Quem somos?</a></li>
                  <li><a href="services.html">Serviços</a></li>
              </ul>
          </nav>                        
        </div> 

    </header>  

´´´

Answer 1

I see your envelope icon is actually a .jpg, which doesn't support transparency. The telephone icon is .png. I suggest you to look for icons with transparency. Try findicons.com or flaticon.com

Answer 2

Is the Envelope image you insert. It is .jpg format. Should save as .png.

Jpg file dont support transparency.

Cheers

Answer 3

JPG does not allow transparency. The other icon works because it's a PNG image, which is allow transparency. You should use a png image for the envelope icon too.

Answer 4

I did try multiple png images and they didn't work either. :(