it-swarm.com.de

Farbe des PNG-Bildes über CSS ändern?

Ist es bei einem transparenten PNG mit einer einfachen Form in Weiß möglich, die Farbe durch CSS zu ändern? Eine Art Overlay oder was nicht?

391
Wesley

Sie können Filter mit -webkit-filter und filter verwenden: Filter sind für Browser sehr neu und werden nur in sehr modernen Browsern unterstützt. Sie können ein Bild in Graustufen, Sepia und vieles mehr ändern (siehe 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="http://i.stack.imgur.com/OyP0g.jpg" title="original">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="saturate" class="saturate">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="grayscale" class="grayscale">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="contrast" class="contrast">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="brightness" class="brightness">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="blur" class="blur">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="invert" class="invert">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="sepia" class="sepia">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="huerotate" class="huerotate">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="opacity" class="rss opacity">

Quelle

496
РАВИ

Vielleicht möchten Sie einen Blick auf Icon-Schriften werfen. http://css-tricks.com/examples/IconFont/

BEARBEITEN: Ich verwende Font-Awesome für mein letztes Projekt. Sie können es sogar bootstrap. Gib das einfach in deinen <head> ein:

<link href="//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="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome-ie7.min.css" rel="stylesheet">

Und dann mach weiter und füge ein paar Icon-Links hinzu:

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

Hier ist das vollständige Spickzettel

--bearbeiten--

Font-Awesome verwendet in der neuen Version unterschiedliche Klassennamen, wahrscheinlich, weil dadurch die CSS-Dateien drastisch kleiner werden und mehrdeutige CSS-Klassen vermieden werden. So, jetzt solltest du folgendes benutzen:

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

EDIT 2:

Gerade herausgefunden, dass Github auch eine eigene Icon-Schriftart verwendet: Octicons Der Download ist kostenlos. Sie haben auch einige Tipps zu wie Sie Ihre eigenen Symbolschriften erstellen .

55
Jules Colle

Ich habe dieses großartige Codepen-Beispiel gefunden, bei dem Sie Ihren hexadezimalen Farbwert einfügen, und es gibt den erforderlichen Filter zurück, um diese Farbe auf png anzuwenden

CSS-Filtergenerator zum Konvertieren von Schwarz zu Hex-Zielfarbe

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

dann musst du den folgenden filter auf dein png anwenden

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

Das img-Tag verfügt wie jedes andere über eine Hintergrundeigenschaft. Wenn Sie ein weißes PNG mit einer transparenten Form wie eine Schablone haben, können Sie dies tun:

<img src= 'stencil.png' style= 'background-color: red'>
25
Kirill G

Ich konnte dies mit dem SVG-Filter tun. Sie können einen Filter schreiben, der die Farbe des Quellbilds mit der Farbe multipliziert, zu der Sie wechseln möchten. Im Code-Snippet unten ist Farbüberflutung die Farbe, in die die Bildfarbe geändert werden soll (in diesem Fall Rot). FeComposite teilt dem Filter mit, wie die Farbe verarbeitet wird. 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 entsprechend sind. Wenn Sie also nur k1 = 1 angeben, bedeutet dies, dass nur i1 * i2 verwendet wird, was bedeutet, dass beide Eingabefarben miteinander multipliziert werden.

Hinweis: Dies funktioniert nur mit HTML5, da dies Inline-SVG verwendet. Aber ich denke, dass Sie in der Lage sein könnten, diese Funktion mit einem älteren Browser auszuführen, indem Sie SVG in eine separate Datei einfügen. 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>

Ja :)

Surfin 'Safari - Blog Archiv "CSS Masken

WebKit unterstützt jetzt Alphamasken in CSS. Mit Masken können Sie den Inhalt einer Box mit einem Muster überlagern, mit dem Teile dieser Box in der endgültigen Anzeige ausgeblendet werden können. Mit anderen Worten, Sie können komplexe Formen aus dem Alpha eines Bildes ausschneiden.
[...]
Wir haben neue Eigenschaften eingeführt, um Webdesignern eine umfassende Kontrolle über diese Masken und deren Anwendung zu ermöglichen. Die neuen Eigenschaften entsprechen den bereits vorhandenen Hintergrund- und Randbildeigenschaften.

-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)
20
benhowdle89

In den meisten Browsern können Sie Filter verwenden:

  • auf <img> Elementen und Hintergrundbildern anderer Elemente

  • und setzen Sie sie entweder statisch in Ihrem CSS oder dynamisch mit JavaScript

Siehe Demos unten.


<img> Elemente

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

#original, #changed {
    width: 45%;
    padding: 2.5%;
    float: left;
}

#changed {
    -webkit-filter : hue-rotate(180deg);
    filter : hue-rotate(180deg);
}
<img id="original" src="http://i.stack.imgur.com/rfar2.jpg" />

<img id="changed" src="http://i.stack.imgur.com/rfar2.jpg" />

Hintergrundbilder

Sie können diese Technik auf ein Hintergrundbild anwenden:

#original, #changed {
    background: url('http://i.stack.imgur.com/kaKzj.jpg');
    background-size: cover;
    width: 30%;
    margin: 0 10% 0 10%;
    padding-bottom: 28%;
    float: left;
}

#changed {
    -webkit-filter : hue-rotate(180deg);
    filter : hue-rotate(180deg);
}
<div id="original"></div>

<div id="changed"></div>

JavaScript

Sie können JavaScript verwenden, um zur Laufzeit einen Filter festzulegen:

var element = document.getElementById("changed");
var filter = 'hue-rotate(120deg) saturate(2.4)';
element.style['-webkit-filter'] = filter;
element.style['filter'] = filter;
#original, #changed {
    margin: 0 10%;
    width: 30%;
    float: left;
    background: url('http://i.stack.imgur.com/856IQ.png');
    background-size: cover;
    padding-bottom: 25%;
}
<div id="original"></div>

<div id="changed"></div>
16
John Slegers

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

Mit jedem weißen PNG (z. B. einem weißen Symbol auf transparentem Hintergrund) können Sie einen :: after-Selektor hinzufügen, um die Farben 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 */
}

Siehe diesen Codepen (Anwenden des Farbwechsels beim Schweben): http://codepen.io/chrscblls/pen/bwAXZO

15
chrscblls

Ich fand das beim googeln und fand es am besten für mich zu arbeiten ...

HTML

<div class="img"></div>

CSS

.img {
  background-color: red;
  width: 60px;
  height: 60px;
   -webkit-mask-image: url('http://i.stack.imgur.com/gZvK4.png');
}

http://jsfiddle.net/a63b0exm/

Die einfachste Zeile, die 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.

7
Rehmat

Ich benötigte eine bestimmte Farbe, sodass der Filter bei mir nicht funktionierte.

Stattdessen habe ich ein div erstellt, das mehrere CSS-Hintergrundbilder und die Funktion für den linearen Farbverlauf (die ein Bild selbst erstellt) ausnutzt. Wenn Sie den Overlay-Mischmodus verwenden, wird Ihr aktuelles Bild mit dem generierten "Farbverlauf" mit der gewünschten Farbe gemischt (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;        
    }
<div class="colored-image"></div>
7
pyre

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

der Stift in @chrscblls Antwort funktioniert gut, wenn Sie einen weißen oder schwarzen Hintergrund haben, meiner jedoch nicht. Außerdem wurden die Bilder mit ng-repeat generiert, sodass ich ihre URL nicht in meinem CSS haben konnte UND Sie :: after nicht für img-Tags verwenden können.

Also habe ich mir eine Lösung ausgedacht und gedacht, dass es den Leuten helfen könnte, wenn sie zu sehr hier stolpern.

Also, was ich getan habe, ist ziemlich gleich, mit drei Hauptunterschieden:

  • die URL befindet sich in meinem IMG-Tag. Ich habe sie (und ein Label) in einem anderen Div abgelegt, auf dem :: after funktioniert.
  • der 'Mix-Blend-Modus' ist auf 'Differenz' anstatt auf 'Multiplizieren' oder 'Bildschirm' eingestellt.
  • Ich habe ein :: before mit genau dem gleichen Wert hinzugefügt, damit das :: after den 'Unterschied' zu dem 'Unterschied' macht, den das :: before macht, und es selbst annulliert.

Um von Schwarz auf Weiß oder von Weiß auf Schwarz zu wechseln, muss die Hintergrundfarbe Weiß sein. Von Schwarz bis zu Farben können Sie jede Farbe auswählen. Von Weiß bis zu Farben müssen Sie die entgegengesetzte Farbe für die gewünschte 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

4
Salix

Wenn Sie nur ein Symbol benötigen, ist kein vollständiger Schriftsatz erforderlich, und ich habe das Gefühl, dass es als einzelnes Element "sauberer" ist. Zu diesem Zweck können Sie in HTML5 eine SVG-Datei direkt im Dokumentenfluss platzieren. Anschließend können Sie eine Klasse in Ihrem CSS-Stylesheet definieren und über die Eigenschaft fill auf deren Hintergrundfarbe zugreifen:

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

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

3
Pere

Um die Farbe im wahrsten Sinne des Wortes zu ändern, können Sie einen CSS-Übergang mit einem -webkit-Filter einfügen, bei dem Sie den -webkit-Filter Ihrer Wahl aufrufen, wenn etwas passiert. Zum Beispiel:

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