Ändern Sie die Farbe des PNG-Bildes über CSS?

Wenn ein transparentes PNG eine einfache Form in Weiß anzeigt, ist es dann möglich, die Farbe durch CSS irgendwie zu ändern? Eine Art Overlay oder was nicht?

   

Sie können Filter von -webkit-filter und filter : Filter sind sehr neu in Browsern und werden nur in sehr modernen Browsern unterstützt. Sie können ein Bild in Graustufen, Sepia und vieles mehr ändern (siehe Beispiel).

Sie können nun die Farbe einer PNG-Datei mit Filtern ändern.

 body { background-color:#03030a; min-width: 800px; min-height: 400px } img { width:20%; float:left; margin:0; } /*Filter styles*/ .saturate { filter: saturate(3); } .grayscale { filter: grayscale(100%); } .contrast { filter: contrast(160%); } .brightness { filter: brightness(0.25); } .blur { filter: blur(3px); } .invert { filter: invert(100%); } .sepia { filter: sepia(100%); } .huerotate { filter: hue-rotate(180deg); } .rss.opacity { filter: opacity(50%); } 
  Mona Lisa Mona Lisa Mona Lisa Mona Lisa Mona Lisa Mona Lisa Mona Lisa Mona Lisa Mona Lisa Mona Lisa 

Vielleicht möchten Sie sich Icon Fonts ansehen. http://css-tricks.com/examples/IconFont/

EDIT: Ich benutze Font-Awesome auf meinem neuesten Projekt. Sie können es sogar booten. Setzen Sie das einfach in Ihren :

    

Und dann gehen Sie weiter und fügen Sie einige Icon-Links wie folgt hinzu:

  

Hier ist der vollständige Spickzettel

–bearbeiten–

Font-Awesome verwendet in der neuen Version verschiedene classnnamen, wahrscheinlich weil dadurch die CSS-Dateien drastisch kleiner werden und mehrdeutige CSS-classn vermieden werden. So, jetzt sollten Sie verwenden:

  

EDIT 2:

Gerade heraus gefunden Github verwendet auch eine eigene Symbolschrift : Octicons Es ist kostenlos zum Download. Sie haben auch einige Tipps, wie Sie Ihre eigenen Icon-Fonts erstellen können .

Das img-Tag hat genau wie jedes andere eine Hintergrundeigenschaft. Wenn Sie ein weißes PNG mit einer transparenten Form wie eine Schablone haben, können Sie Folgendes tun:

  

Ja 🙂

Surfin ‘Safari – Blog Archiv »CSS Masken

WebKit unterstützt jetzt Alpha-Masken in CSS. Mit Masken können Sie den Inhalt einer Box mit einem Muster überlagern, mit dem Sie Teile der Box in der endgültigen Anzeige ausstanzen können. Mit anderen Worten, Sie können komplexe Formen basierend auf dem Alpha eines Bildes schneiden.
[…]
Wir haben neue Eigenschaften eingeführt, um Webdesignern viel Kontrolle über diese Masken und ihre Anwendung zu geben. Die neuen Eigenschaften entsprechen den bereits vorhandenen Hintergrund- und Rahmenbildeigenschaften.

 -webkit-mask (background) -webkit-mask-attachment (background-attachment) -webkit-mask-clip (background-clip) -webkit-mask-origin (background-origin) -webkit-mask-image (background-image) -webkit-mask-repeat (background-repeat) -webkit-mask-composite (background-composite) -webkit-mask-box-image (border-image) 

Ich konnte dies mit SVG-Filter tun. Sie können einen Filter schreiben, der die Farbe des Quellbildes mit der Farbe multipliziert, die Sie ändern möchten. Im folgenden Codefragment ist Flutfarbe die Farbe, in die wir die Bildfarbe ändern möchten (was in diesem Fall Rot ist.) FeComposite gibt dem Filter an, wie wir die Farbe verarbeiten. Die Formel für feComposite mit Arithmetik lautet (k1 * i1 * i2 + k2 * i1 + k3 * i2 + k4), wobei i1 und i2 Eingabefarben für in / in2 sind. Wenn also nur k1 = 1 angegeben wird, bedeutet das, dass es nur i1 * i2 ist, was bedeutet, dass beide Eingabefarben miteinander multipliziert werden.

Hinweis: Dies funktioniert nur mit HTML5, da hier Inline-SVG verwendet wird. Aber ich denke, dass Sie in der Lage sein können, dies mit älteren Browsern zu machen, indem Sie SVG in eine separate Datei einfügen. Ich habe diesen Ansatz noch nicht ausprobiert.

Hier ist der Ausschnitt:

                            

In den meisten Browsern können Sie Filter verwenden:

  • auf beiden Elementen und Hintergrundbildern anderer Elemente

  • und setze sie entweder statisch in deinem CSS oder dynamisch mit JavaScript

Siehe Demos unten.


Elemente

Sie können diese Technik auf ein -Element anwenden:

 #original, #changed { width: 45%; padding: 2.5%; float: left; } #changed { -webkit-filter : hue-rotate(180deg); filter : hue-rotate(180deg); } 
   

Ich denke, ich habe eine Lösung dafür, a) genau das, was Sie vor 5 Jahren gesucht haben, und b) ist ein bisschen einfacher als die anderen Code-Optionen hier.

Mit jedem weißen png (z. B. weißes Symbol auf transparentem Hintergrund) können Sie einen :: after-Selektor hinzufügen, um neu einzufärben.

 .icon { background: url(img/icon.png); /* Your icon */ position: relative; /* Allows an absolute positioned psuedo element */ } .icon::after{ position: absolute; /* Positions psuedo element relative to .icon */ width: 100%; /* Same dimensions as .icon */ height: 100%; content: ""; /* Allows psuedo element to show */ background: #EC008C; /* The color you want the icon to change to */ mix-blend-mode: multiply; /* Only apply color on top of white, use screen if icon is black */ } 

Sehen Sie sich diesen Codepen an (Anwendung des Farbaustauschs bei Hover): http://codepen.io/chrscbls/pen/bwAXZO

Ich fand dieses großartige Codepenbeispiel, dass Sie Ihren hexadezimalen Farbwert einfügen und es den benötigten Filter zurückgibt, um diese Farbe auf png anzuwenden

CSS-Filter-Generator zum Konvertieren von Schwarz in die Ziel-Hex-Farbe

zum Beispiel brauchte ich mein Png, um die folgende Farbe # 1a9790 zu haben

dann musst du den folgenden Filter auf dich anwenden png

 filter: invert(48%) sepia(13%) saturate(3207%) hue-rotate(130deg) brightness(95%) contrast(80%); 

Ich benötigte eine bestimmte Farbe, daher funktionierte der Filter nicht für mich.

Stattdessen habe ich ein div erstellt, das mehrere Hintergrundbilder von CSS und die lineare Farbverlaufsfunktion (die selbst ein Bild erzeugt) ausnutzt. Wenn Sie den Overlay-Mischmodus verwenden, wird Ihr tatsächliches Bild mit dem generierten “Farbverlauf” -Bild gemischt, das Ihre gewünschte Farbe enthält (hier # BADA55).

 .colored-image { background-image: linear-gradient(to right, #BADA55, #BADA55), url("https://i.imgur.com/lYXT8R6.png"); background-blend-mode: overlay; background-size: contain; width: 200px; height: 200px; } 
 

Es gibt keine Notwendigkeit für eine ganze Schriftart, wenn Sie nur ein Symbol benötigen, und ich fühle, dass es als einzelnes Element “sauberer” ist. Zu diesem Zweck können Sie in HTML5 ein SVG direkt in den Dokumentenfluss einfügen. Dann können Sie eine class in Ihrem .CSS-Stylesheet definieren und mit der Eigenschaft fill auf die Hintergrundfarbe zugreifen:

Arbeitsgeige: http://jsfiddle.net/qmsj0ez1/

Beachten Sie, dass ich im Beispiel Folgendes verwendet habe :hover , um das Verhalten zu veranschaulichen. Wenn Sie nur die Farbe für den “normalen” Zustand ändern möchten, sollten Sie die Pseudoklasse entfernen.

Antwort, weil ich nach einer Lösung dafür gesucht habe.

der Stift in @chrscbls Antwort funktioniert gut, wenn Sie einen weißen oder schwarzen Hintergrund haben, aber meiner war nicht. Außerdem wurden die Bilder mit ng-repeat erzeugt, also konnte ich ihre URL nicht in meinem CSS haben und Sie können :: after on img tags nicht benutzen.

Also dachte ich mir eine Arbeit aus und dachte, dass es Leuten helfen könnte, wenn auch sie hier stolpern.

Was ich gemacht habe, ist ziemlich gleich mit drei Hauptunterschieden:

  • die url ist in meinem img-tag, ich lege sie (und ein label) in ein anderes div, auf dem :: after funktioniert.
  • Der “Mix-Blend-Modus” ist auf “Differenz” anstatt auf “Multiplizieren” oder “Bildschirm” eingestellt.
  • Ich fügte a :: before mit genau dem gleichen Wert hinzu, so dass der :: after den “Unterschied” der “Differenz” machte, die von :: before und canceled it-self gemacht wurde.

Um sie von Schwarz zu Weiß oder von Weiß zu Schwarz zu ändern, muss die Hintergrundfarbe Weiß sein. Von Schwarz bis zu colors können Sie jede Farbe wählen. Von Weiß bis zu colors, müssen Sie die entgegengesetzte Farbe des gewünschten auswählen.

 .divClass{ position: relative; width: 100%; height: 100%; text-align: left; } .divClass:hover::after, .divClass:hover::before{ position: absolute; width: 100%; height: 100%; background: #FFF; mix-blend-mode: difference; content: ""; } 

https://codepen.io/spaceplant/pen/oZyMYG

Um die Farbe sprichwörtlich zu ändern, könnten Sie einen CSS-Übergang mit einem -webkit-Filter einbauen, bei dem Sie, wenn etwas passiert, den -webkit-Filter Ihrer Wahl aufrufen würden. Beispielsweise:

 img { -webkit-filter:grayscale(0%); transition: -webkit-filter .3s linear; } img:hover { -webkit-filter:grayscale(75%); }