Frage bild von lupe will nicht transparent werden

[Tobixs]

moin, ich bin ein neuer Programmierer der schon seit längerem ein Projekt am laufen in der das Lupe Bild was ich in der search bar habe nicht transparent werden will. ich habe schon vieles versucht wie opacy was das ganze Bild transparent macht. background:rgba(255,255,255,0.5); was irgendwie nicht funktioniert. auch -webkit-tap-highlight-color: transparent; funktioniert nicht und ich habe schon viel im Internet recherchiert.

---

hier mein html code:

bei <ig> das scr etc einfach vergessen
<section id="searchBox">
<div class="searchBox" style="float: left;">
<input class="searchInput"type="text" name="" placeholder="Search">
<button class="searchButton" href="#">
<i class="material-icons">
<ig src="bilder/lupe bild.jpg" style="opacity: 1; height: 23px; width: 23px;">
<img src="bilder/lupe-bild.png" alt="lupe" class="lupe">
</i>
</button>
</div>
</section>

und hier mein css code:

.searchBox {
position: absolute;
top: 0.9%;
left: 83%;
transform: translate(-50%,50%);
background: #555555;
height: 40px;
border-radius: 40px;
padding: 10px;
float: left;
}
.searchBox:hover > .searchInput {
width: 240px;
padding: 0 6px;
}
.searchBox:hover > .searchButton {
background: white;
color : #555555;
}
.searchButton {
color: white;
float: left;
width: 40px;
height: 40px;
border-radius: 50%;
background: #555555;
display: flex;
justify-content: center;
align-items: center;
transition: 0.4s;
}
.searchInput {
border:none;
background: none;
outline:none;
float:left;
padding: 0;
color: white;
font-size: 20px;
transition: 0.4s;
line-height: 40px;
width: 0px;
}
@media screen and (max-width: 620px) {
.searchBox:hover > .searchInput {
width: 150px;
padding: 0 6px;
}
}

ich wäre sehr dankbar falls mir jemand helfen kann
lg

 

[Oliver77]

Du brauchst ein Bild als PNG mit Transparenz, warum hast du es als PNG und JPG drin?