Farbe eines PNG-Bildes über CSS ändern?

Question

Angesichts einer transparenten PNG-Anzeige eine einfache Form in weiß, ist es möglich, irgendwie die Farbe dieser durch CSS ändern? Eine Art von Overlay oder was nicht?

Answer 1

Sie können Filter verwenden mit -webkit-filter y filter : Filter sind relativ neu in Browsern, werden aber laut der folgenden CanIUse-Tabelle von über 90 % der Browser unterstützt: https://caniuse.com/#feat=css-filters

Sie können ein Bild in Graustufen, Sepia und vieles mehr umwandeln (siehe das Beispiel).

So können Sie jetzt 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%); }

<!--- img src http://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/500px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg -->
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="original">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="saturate" class="saturate">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="grayscale" class="grayscale">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="contrast" class="contrast">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="brightness" class="brightness">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="blur" class="blur">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="invert" class="invert">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="sepia" class="sepia">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="huerotate" class="huerotate">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="opacity" class="rss opacity">

_{<a href="http://codepen.io/rss/pen/ftnDd" rel="noreferrer">Quelle</a>}

Answer 2

Ich habe dieses großartige Codepen-Beispiel gefunden, in das Sie Ihre Hex-Farbe Wert und gibt den benötigten Filter zurück, um diese Farbe auf png anzuwenden

CSS-Filter-Generator zur Umwandlung von Schwarz in die Ziel-Hex-Farbe

Ich brauchte zum Beispiel für mein png folgende Farbe #1a9790

dann müssen Sie den folgenden Filter auf Ihr png anwenden

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

PS: Der Codepen basiert auf dieser brillanten Antwort von MultiplyByZer0 hier: Wie man Schwarz in jede beliebige Farbe umwandelt, indem man nur CSS-Filter verwendet

Alle Anerkennung geht an ihn :clap:

Answer 3

Vielleicht sollten Sie sich die Icon-Schriften ansehen. http://css-tricks.com/examples/IconFont/

EDIT: Ich verwende Font-Awesome über mein neuestes Projekt. Sie können es sogar mit einem Bootstrap versehen. Fügen Sie dies einfach in Ihr <head> :

<link href="http://stackoverflow.com//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">

<!-- And if you want to support IE7, add this aswell -->
<link href="http://stackoverflow.com//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome-ie7.min.css" rel="stylesheet">

Und dann fügen Sie einige Icon-Links wie dieses hinzu:

<a class="icon-thumbs-up"></a>

Hier ist die Vollständiger Spickzettel

--edit--

Font-Awesome verwendet in der neuen Version andere Klassennamen, wahrscheinlich, um die CSS-Dateien drastisch zu verkleinern und um mehrdeutige CSS-Klassen zu vermeiden. Also sollten Sie jetzt verwenden:

<a class="fa fa-thumbs-up"></a>

EDIT 2:

Ich habe gerade herausgefunden, dass Github auch seine eigene Icon-Schriftart verwendet: Achtecke Es kann kostenlos heruntergeladen werden. Sie haben auch einige Tipps für wie Sie Ihre eigenen Icon-Schriften erstellen .

Answer 4

Der einfachste Satz, der bei mir funktioniert hat:

filter: opacity(0.5) drop-shadow(0 0 0 blue);

Sie können die Deckkraft von 0 bis 1 einstellen, um die Farbe heller oder dunkler zu machen.

Answer 5

Ich konnte dies mit dem SVG-Filter erreichen. Sie können einen Filter schreiben, der die Farbe des Quellbildes mit der Farbe multipliziert, die Sie ändern möchten. Im folgenden Codeschnipsel, Hochwasser-Farbe ist die Farbe, in die wir die Bildfarbe ändern wollen (in diesem Fall Rot). feComposite teilt dem Filter mit, wie wir die Farbe verarbeiten. Die Formel für feComposite mit Arithmetik ist (k1*i1*i2 + k2*i1 + k3*i2 + k4), wobei i1 und i2 die Eingabefarben für in/in2 sind. Wenn man also nur k1=1 angibt, wird nur i1*i2 berechnet, was bedeutet, dass beide Eingangsfarben miteinander multipliziert werden.

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

Hier ist der Ausschnitt:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="90" style="float:left">
  <defs>
    <filter id="colorMask1">
      <feFlood flood-color="#ff0000" result="flood" />
      <feComposite in="SourceGraphic" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
    </filter>
  </defs>
  <image width="100%" height="100%" xlink:href="http://i.stack.imgur.com/OyP0g.jpg" filter="url(#colorMask1)" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="90" style="float:left">
  <defs>
    <filter id="colorMask2">
      <feFlood flood-color="#00ff00" result="flood" />
      <feComposite in="SourceGraphic" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
    </filter>
  </defs>
  <image width="100%" height="100%" xlink:href="http://i.stack.imgur.com/OyP0g.jpg" filter="url(#colorMask2)" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="90" style="float:left">
  <defs>
    <filter id="colorMask3">
      <feFlood flood-color="#0000ff" result="flood" />
      <feComposite in="SourceGraphic" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
    </filter>
  </defs>
  <image width="100%" height="100%" xlink:href="http://i.stack.imgur.com/OyP0g.jpg" filter="url(#colorMask3)" />
</svg>