Beispielcode zum Ändern der Farbe eines PNG-Bildes durch einen CSS3-Filter

Diese Methode verwendet den filter in CSS3 drop-shadow um eine Projektion beliebiger Farbe auf den nicht transparenten Teil des PNG-Bildes zu erzeugen und dann das Originalbild auszublenden, wodurch der Zweck der Farbänderung des Bildes erreicht wird. Sehen Sie sich zuerst den Effekt an

Als nächstes kommt der Code

<p><strong>Ursprüngliches Symbol</strong></p>
<i class="icon icon-del"></i>
<p><strong>Symbole, die ihre Farbe ändern können</strong></p>
<i class="icon"><i class="icon icon-del"></i></i>

.Symbol {
    Anzeige: Inline-Block;
    Breite: 20px; Höhe: 20px;
    Überlauf: versteckt;
}
.icon-del {
    Hintergrund: URL (delete.png) No-Repeat-Center;
}
.Symbol > .Symbol {
    Position: relativ;
    links: -20px;
    Rahmen rechts: 20px durchgehend transparent;
    -Webkit-Filter: Schlagschatten (#0033FF 20px 0);
    Filter: Schlagschatten (#0033FF 20px 0);
}

Beachten Sie, dass einer der wichtigsten Punkte

border-right: 20px solid transparent;

Wenn in Chrome der Hauptteil eines Elements auf der Seite in keiner Weise sichtbar ist, ist sein Schlagschatten unsichtbar; wenn der Hauptteil auch nur um 1 Pixel sichtbar ist, ist der Schlagschatten vollständig sichtbar.

Da wir overflow:hidden verwendet haben, um das ursprüngliche Symbol auszublenden, kann seine Projektion im Chrome-Browser nicht normal angezeigt werden. Wir lösen dieses Problem, indem wir einen transparenten Rahmen hinzufügen.

Zusammenfassen

Dies ist das Ende dieses Artikels zum Ändern der Farbe von PNG-Bildern durch CSS3-Filter. Weitere relevante Inhalte zum Ändern der Farbe von PNG-Bildern mit CSS finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!