Farbe overlay png in html5/css3

Ich habe eine Menge von png-Bildern, und das will ich jetzt ändern Sie Ihre Farbe. Ich könnte öffnen Sie diese Bilder in photoshop und fügen Sie eine Schicht Stil - Farbe-Overlay.

Zum Beispiel:
http://www.iconfinder.com/icondetails/103303/128/arrow_right_sans_icon
Ändern Sie die schwarze Farbe zu Grau.

Aber gibt es einen einfachen Weg, dies zu tun mit HTML5/CSS3?

mögliche Duplikate von: stackoverflow.com/questions/7415872/...
Ich konnte dies tun, aber dann muss ich alle ändern, diese png-Bilder. Ich Frage mich, ob ich könnte die Farbe ändern ohne Anpassung der Bilder in Photoshop.
Ich weiß, das jQuery-Mobile-Projekt ist etwas ähnliches. Ich bin mir nicht sicher wie, aber es wäre eine Untersuchung Wert. Wenn Sie eine html5/css3-Lösung für dieses problem, lassen Sie uns bitte (SO) kennen.

InformationsquelleAutor Lilly | 2013-06-05

  1. 4

    Es ist möglich, mit CSS, hat aber so großen Einschränkungen, es ist weit von eine perfekte Lösung.

    HTML

    <img src="http://cdn2.iconfinder.com/data/icons/picol-vector/32/arrow_sans_right-128.png"/>

    CSS

    img {
    -webkit-mask-image:-webkit-linear-gradient(top, rgba(0, 0, 0,.4), rgba(0, 0, 0,.4));
}

    Den Einschränkungen wird

    • Webkit-nur
    • Können nur ändern von schwarz zu etwas mehr transparent, d.h. Grau. Farb-Masken sind nicht möglich.

    demo - Getestet in Chrome 26.

    InformationsquelleAutor andyb

  2. 3

    (Ein bisschen spät)

    Wenn Sie wissen, der hintergrund bleibt der gleiche Farbe über die gesamte website und die Sie nicht Verstand Herumspielen ein bisschen in Photoshop, natürlich könnten Sie füllen Sie den transparenten Teil mit Ihre Hintergrundfarbe und schneiden Sie das Symbol, um dieses Teil transparent.

    Diese Weise können Sie eine Hintergrundfarbe hinter es und machen es, was Farbe Sie wollen...

    HTML

    <img src="transparencyswitch.png" height="20" width="20"/>

    CSS

    img {
    background-color: grey;
}

    InformationsquelleAutor Vince Caregnato

  3. 0

    Könnte man das Bild in ein div-Element, und fügen Sie die Deckkraft, und eine hintergrund-Farbe des div.

    Überprüfen Sie diese links für weitere Informationen. Der zweite link enthält einige photoshop:

    1. http://www.impressivewebs.com/image-tint-blend-css/
    2. http://mattersofgrey.com/png-background-color-change-with-css/
    Die Bild-Tönung funktioniert nicht auf png-Bilder. Der zweite link funktioniert auch mit background-color, also die Farbe ist für die gesamte div, nicht für den Pfeil. Denke, ich werde gehen für die erste option (stackoverflow.com/questions/7415872/...)

    InformationsquelleAutor imbecile

  4. 0

    Ich empfehlen konvertieren Sie Ihre PNG in ein SVG. Ich hatte das gleiche problem, bis ich das Tat. Von dort aus müssen Sie nur ändern Sie die Füllfarbe (die können auch dynamisch sein, Z. B. wordpress)

    InformationsquelleAutor Maarten Wolfsen

  5. -2

    Einen Weg, dies zu tun ist, um das Bild in ein div und setze ein div oben, dass mit der Deckkraft, so dass Sie noch sehen kann das Bild ein wenig, aber es hat die Farbe der überlagerung div.
    Andere Wege sind nicht möglich, mit html5/css3.

    Beispiele: hier

    Beispiele link deaded.

    InformationsquelleAutor Kees Sonnema

Schreibe einen Kommentar