transparent png wird nicht transparent dargestellt?

Question

Ich habe das Bild als transparentes PNG gespeichert, aber nichts, was ich tun kann, scheint es zu reparieren!?! Irgendwelche Ideen???

Hier ist eine Kopie des Bildes in GIMP zeigt, dass es in der Tat transparent:

Es sollte wie folgt aussehen

schließlich, Einige gute alte Code:

Das Markup:

<form class="search" action="search.php"><input class="search" type="text" name="search" id="searchbox"/></form> 

Search Box CSS:

.search, .search:active, .search:focus, .search:visited { 
    position: absolute; 
    color: #fff; 
    top: 3px; 
    width: 368px; 
    right: 9%; 
    font-size: 28px; 
    z-index: 3; 
    border-radius: 20px; 
    /* box-shadow: inset -2px 0px 1px rgba(0,0,0,.8); */ 
    text-indent: 10px; 
    text-shadow: 0px -2px 3px rgba(0, 0, 0, .7); 
    background-color: #00D4C7; 
} 

Das Symbol Suchen CSS selbst:

Pseudo ::before element 
.search:before { 
    content: ""; 
    position: absolute; 
    top: 7px; 
    left: 268px; 
    background-image: url("images/icon-search.png"); 
    background-color: rgb(0, 185, 171); 
    width: 46px; 
    height: 30px; 
    z-index: 4; 
} 

Hinweis: Wenn ich die Klasse Suche von Form zu entfernen, Es entfernt mein Bild, wenn ich Klassensuche von dem Eingabeelement entferne, das es noch mit dem funky Schatten über meinem Bild rendert ... An y Ideen?

Bearbeiten 1: Wenn ich tun, wie vorgeschlagen, indem Sie die expliziten Dimensionen des Bildes (wie ich für andere Pseudo-Elemente ohne Problem), löst es nicht mein Problem. Ich habe das Projekt bereits eingereicht, also möchte ich wissen, was passiert ist und wie ich das beheben kann. Ich griff zu einem CSS-Hack, der die Helligkeit auf bessere Übereinstimmung geändert [mit einem schwachen Umrisse noch]

Edit 2: Zeigen Sie mir die JS Fiddle!

Answer 1

ihr habt Ihr Bild ein background-color: rgb(0, 185, 171); was # 00b9ab ist

und das searchbox background-color: #00D4C7; was rgb (0, 212, 199)

Answer 2

Dies könnte geschehen, weil Sie Ihre Hintergrundbildgröße unterschiedlich ist als sein Behälter, .search::before, Größe. Und/oder weil Ihre .search::before Hintergrundfarbe ein anderer Hexadezimalwert ist.

Versuchen Sie Folgendes: Fügen Sie background-color: transparent; und background-size: 46px 30px; zu .search::before hinzu. Wenn das Hintergrundbild kleiner als der Container ist, wird der restliche Speicherplatz transparent und die Hintergrundbildgröße wird auf den Container festgelegt, den Sie explizit festgelegt haben.

Answer 3

Mein Bild selbst war nicht wirklich transparent. Es gibt einen kleinen Opazitätskanal, der dazu führt, dass die graue Trübung auf einem nicht weißen Hintergrund erscheint. Ich habe Wind davon gehört, wenn ich imgur gepostet habe ... und habe es mit Sicherheit bestätigt, als ich tatsächlich eine Kopie der Schicht (in Photoshop) mit select by color gemacht habe.

Lösung: Ihre Bilder überprüfen ..., dies zu tun, laden Sie es auf ein Fenster von selbst und stellen Sie den HTML-Körper auf eine nicht-weiße Farbe. Ich wünsche, ich dachte, das dies vor dem Absenden zu tun: