Farbe des PNG-Bildes über CSS ändern?

464

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?

css  image  colors  png  overlay 
— Wesley
quelle
4
Sie können die background-colorCSS-Eigenschaft festlegen . Sie können einen nicht transparenten Teil erstellen, der fixiert wird, und einen transparenten Teil des Bildes, der über CSS mit einer beliebigen Farbe gefüllt wird. Wollen Sie das erreichen?
— Jakub.g
2
@qbk, das ist eine Antwort wert, nicht nur ein Kommentar. Und du hast mich technisch um 1 Sekunde geschlagen.
— Kirill G
2
Sie können Pseudo-Elemente mit einem Mischmodus verwenden, um jedes Symbol neu einzufärben, das zu 100% schwarz oder zu 100% weiß ist (der Hintergrund bleibt transparent). Siehe meine Antwort hier: stackoverflow.com/a/39796437/1472114
— chrscblls

Antworten:

569

Sie können Filter mit -webkit-filterund verwenden filter: Filter sind für Browser relativ neu, werden jedoch in über 90% der Browser gemäß der folgenden CanIUse-Tabelle unterstützt: https://caniuse.com/#feat=css-filters

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="https://www.pexels.com/photo/photo-of-a-green-leaf-2563743/?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">
Erweitern Sie das Snippet

Quelle

— РАВИ
quelle
12
Die kurze Antwort lautet, dass es für die meisten Browser keine allgemeine Lösung gibt.
— Trilarion
18
Aber wird Huerotate oder Sättigung tatsächlich etwas mit einem weißen Bild zu tun haben?
— Keith
6
Update 2016: Dies funktioniert jetzt in fast allen Browsern außer IE: caniuse.com/#feat=css-filters
— Stan
4
@datatype_void Manchmal steuern Sie das Startbild nicht selbst. Es scheint also, dass Sie zustimmen, dass mein Punkt gültig ist. Sie können keine Farbe erreichen, die von Schwarz oder Weiß ausgeht. Oh, und ich habe mehr als 5 Minuten gespielt, um zu diesem Schluss zu kommen.
— AsGoodAsItGets
5
Geben Sie außerdem an, dass Sie Folgendes tun können: Dies .gifcorrect{ filter: invert(28%) sepia(100%) hue-rotate(-180deg) saturate(3); }bedeutet, dass Sie von Schwarz & Transparent oder Graustufen zu Farbe
— wechseln KÖNNEN
140

Ich habe dieses großartige Codepen-Beispiel gefunden, bei dem Sie Ihren Hex-Farbwert einfügen und der den erforderlichen Filter zurückgibt, um diese Farbe auf PNG anzuwenden

CSS-Filtergenerator zur Konvertierung von Schwarz in Hex-Zielfarbe

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

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%);
— Fadi Abo Msalam
quelle
12
<3 <3 <3 <3 <3 <3
— Dwjohnston
2
Ich habe die Farbe mit diesem Code von Blau in Weiß geändert:filter: invert(1%) sepia(1%) saturate(1%) hue-rotate(1deg) brightness(1000%) contrast(80%);
— Anjan Biswas
Das ist toll!!
— Thiago Pires
2
Autor verdient eine Statue! (Beachten Sie die: Helligkeit (0) gesättigt (100%) optionales Präfix, das jeden Zweifel
— beseitigt
1
Wenn jemand es braucht, hier ist eine TS-Konvertierung dieses Codes gist.github.com/dwjohnston/7e60bf5d4b6c071cd869f9f346241c08
— Dwjohnston
56

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

EDIT: Ich verwende Font-Awesome für mein aktuelles Projekt. Sie können es sogar booten. Fügen Sie dies einfach in Ihr <head>:

<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 fügen Sie einige Icon-Links wie diesen hinzu:

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

Hier ist der 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. Jetzt sollten Sie also Folgendes verwenden:

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

EDIT 2:

Gerade herausgefunden, dass Github auch eine eigene Symbolschrift verwendet: Octicons Es kann kostenlos heruntergeladen werden. Sie haben auch einige Tipps zum Erstellen eigener Symbolschriftarten .

— Jules Colle
quelle
Font Awesome macht seinem Namen alle Ehre.
— HerrimanCoder
+1 für unkonventionelles Denken. Und heutzutage gibt es einfach zu verwendende Online-Apps, mit denen Sie aus einem (SVG-) Bild einen Webfont erstellen können.
— Yvan Vander Sanden
Wenn <a class="icon-thumbs-up"> </a> der alte Klassenname und <a class="fa fa-thumbs-up"> </a> der neue ist, glaube ich nicht Wenn das CSS kleiner wird, kann ich ein zusätzliches Leerzeichen zwischen fa und fa-thumbs-up sehen. Fügen Sie dieser CSS-Datei mindestens 1 zusätzliches Byte hinzu, wenn ich mich nicht irre.
— Brandito
Font Awesome war zu seiner Zeit großartig, leider blockiert es das Rendern, was Google und seine Nutzer unglücklich macht. Wir haben dies zunächst behoben, indem wir nicht verwendete Schriftarten sowohl aus den CSS- als auch aus den binären Schriftdateien entfernt und die Daten um etwa die Hälfte reduziert haben. Wir sind gerade dabei, alles zu entfernen und durch ein einfaches Sprite zu ersetzen, das nicht gerendert wird (DOM- und CSSOM-Prozess beschleunigen, Elemente auf der Seite werden schneller angezeigt) und die Daten um weitere 75% auf 6 KB reduzieren. FA ist ungefähr 100KB. CSS-Masken können in unserem Fall hilfreich sein, sind aber wahrscheinlich nicht erforderlich.
— YK
25

Ich konnte dies mit dem SVG-Filter tun. Sie können einen Filter schreiben, der die Farbe des Quellbilds mit der Farbe multipliziert, in die Sie ändern möchten. Im Codeausschnitt unten, Flut-Farbe ist die Farbe , die wir zu ändern Bildfarbe wollen (die Farbe Rot in diesem Fall ist.) FeComposite erzählen die Filter , wie wir die Farbe sind die Verarbeitung. Die Formel für feComposite mit Arithmetik lautet (k1 * i1 * i2 + k2 * i1 + k3 * i2 + k4), wobei i1 und i2 dementsprechend Eingabefarben für in / in2 sind. Wenn Sie also nur k1 = 1 angeben, bedeutet dies, dass nur i1 * i2 ausgeführt wird, was bedeutet, dass beide Eingabefarben miteinander multipliziert werden.

Hinweis: Dies funktioniert nur mit HTML5, da hier Inline-SVG verwendet wird. Aber ich denke, Sie können diese Funktion möglicherweise mit einem älteren Browser ausfü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>
Erweitern Sie das Snippet

— Vasan Jiaramaneetwesin
quelle
4
Mann, du wirst wegen dieser Antwort ausgeraubt. Jeder, der Bilder über den Filter hinaus einfärben möchte: Farbton drehen kann - das ist der Weg, dies zu tun.
— MaxPRafferty
23

Das img-Tag hat wie jedes andere 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'>
— Kirill G.
quelle
147
Ich möchte, dass der weiße Teil anders gefärbt ist, nicht der transparente Teil.
— Wesley
2
beste Lösung, die ich bisher gefunden habe. Schade, dass es nur funktioniert, wenn Sie eine feste Hintergrundfarbe auf Ihren Websites verwenden
— Jules Colle
8
@Wesley Sie müssen das Bild dann invertieren (damit das weiße Bit transparent und der Rest weiß wird), was Sie mit Ihrem bevorzugten Bildeditor und Ihren Lieblingsmasken tun können.
— Charles Goodwin
5
@CharlesGoodwin Das funktioniert nur dann, wenn das Bild auf einem weißen Hintergrund platziert wird.
— Alex
21

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 Teile dieser Box in der endgültigen Anzeige ausgeknockt werden können. Mit anderen Worten, Sie können komplexe Formen basierend auf dem Alpha eines Bildes ausschneiden.
[...]
Wir haben neue Eigenschaften eingeführt, um Webdesignern viel Kontrolle über diese Masken und deren 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)
— benhowdle89
quelle
1
Gehört das zu einem (noch zu erwartenden) Standard, da ich keine Informationen gefunden habe, die nichts mit Webkit zu tun haben, oder handelt es sich nur um Apple-Geschmack? Es scheint, dass die W3 SVG für solche Fälle vorschlägt: w3.org/TR/SVG/masking.html
— feeela
3
Leider scheint dies nur ein Webkit zu sein, und der Blog betrügt, indem er zusammengesetzte Bilder anstelle von tatsächlichen Beispielen verwendet. Diese Antwort ist ein bisschen roter Hering.
— Charles Goodwin
17

In den meisten Browsern können Sie Filter verwenden:

  • sowohl auf <img>Elementen als auch auf Hintergrundbildern anderer Elemente

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

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" />
Erweitern Sie das Snippet

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>
Erweitern Sie das Snippet

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>
Erweitern Sie das Snippet

— John Slegers
quelle
6
Die Frage war, ein weißes Bild mit einem transparenten Hintergrund einzufärben. hue-rotatefunktioniert nicht auf weiß.
— Synetech
17

Ich glaube, 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 Codeoptionen hier.

Mit jedem weißen PNG (z. B. weißes Symbol auf transparentem Hintergrund) können Sie einen :: after-Selektor zum Neufärben hinzufügen.

.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 Farbtauschs beim Hover): http://codepen.io/chrscblls/pen/bwAXZO

— chrscblls
quelle
Ich habe das Bild von imgur wieder aufgenommen und hatte einige Probleme beim Laden.
— chrscblls
In der neuesten Version von Chrome sieht es so aus, als würde auch der (transparente) Hintergrund auf die Farbe eingestellt. Im verknüpften Beispiel sehe ich beim Bewegen des Mauszeigers nur ein undurchsichtiges rosa Quadrat ... Funktioniert gut in Firefox.
— Logidelic
1
@chrscblls Der Link ist tot.
— Steven Lu
15

Die einfachste Zeile, die für mich 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.

— Rehmat
quelle
Nett. Dies vermeidet alle Einschränkungen der anderen Lösungen hier.
— Cdonner
3
Wiederholen Sie Schlagschatten 2-3 Mal, um es stärker zu machen
— DJDance
1
GENIUS SOLUTION, sieht im CSS etwas chaotisch aus, aber mit einem Kommentar ist es vollkommen verständlich. Vielen Dank!
— Richard KeMiKaL GeNeRaL Denton
Es funktioniert nicht, um eine exakte Farbe zu erhalten. Es ist immer eine Mischung zwischen der ursprünglichen und der neuen Farbe.
— Schweizer
Dieser Ansatz verzerrt das Bild leicht und wird jedes Mal schlechter, wenn Schlagschatten angewendet wird. Wie beim Erstellen einer Kopie einer Kopie unterscheiden sich die Ergebnisse vom Original.
— SMAG
8

Ich fand das beim googeln, ich 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/

— Muthukumar Anbalagan
quelle
Das funktioniert, ich habe abgestimmt. Aber nur für die Aufnahme gibt es einige Probleme wie kann das Hintergrundbild nicht in der Größe angepasst werden, kann das Bild nicht positionieren und es wiederholt sich.
— Daniel
Ohh, die habe ich wirklich nicht ausprobiert ... versuche es unter dem Link. developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-box-image danke, Daniel
— Muthukumar Anbalagan
7

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

Stattdessen habe ich ein div erstellt, das mehrere CSS-Hintergrundbilder und die lineare Gradientenfunktion (die selbst ein Bild erstellt) ausnutzt. Wenn Sie den Overlay-Mischmodus verwenden, wird Ihr tatsächliches Bild mit dem generierten "Verlauf" -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;        
    }
<div class="colored-image"></div>
Erweitern Sie das Snippet

— rolznz
quelle
Hat bei mir nicht funktioniert. Ich kann nicht sagen warum, ich kopiere genau eingefügt
— Vic Seedoubleyew
@VicSeedoubleyew das Snippet funktioniert gut. Überprüfen Sie Ihr Div mit Dev-Tools, um sicherzustellen, dass Ihr CSS tatsächlich angewendet wird. Stellen Sie außerdem sicher, dass die URL zu Ihrem Bild gültig ist, wenn Sie nicht die von mir angegebene verwenden. BEARBEITEN: Wenn das Snippet für Sie nicht funktioniert, verwenden Sie möglicherweise einen Browser, der entweder veraltet ist oder die lineare Verlaufsfunktion nicht unterstützt.
— Rolznz
5

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

Der Stift in der Antwort von @chrscblls 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 dachte ich mir eine Lösung aus und dachte, es könnte den Leuten helfen, wenn auch sie hier stolpern.

Was ich also getan habe, ist mit drei Hauptunterschieden ziemlich gleich:

  • Da sich die URL in meinem IMG-Tag befindet, habe ich sie (und ein Label) in ein anderes Div eingefügt, 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' des 'Unterschieds' macht, den das :: before gemacht hat, und es selbst abgebrochen hat.

Um es von Schwarz zu Weiß oder von Weiß zu Schwarz zu ändern, muss die Hintergrundfarbe weiß sein. Von Schwarz bis Farben können Sie jede Farbe auswählen. Von Weiß bis zu Farben müssen Sie die entgegengesetzte Farbe der 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

— Salix
quelle
3

Es ist kein vollständiger Schriftsatz erforderlich, wenn Sie nur ein Symbol benötigen. Außerdem ist es meiner Meinung nach als einzelnes Element "sauberer". Zu diesem Zweck können Sie in HTML5 eine SVG-Datei direkt im Dokumentfluss platzieren. Anschließend können Sie eine Klasse in Ihrem .CSS-Stylesheet definieren und mit der fillEigenschaft auf ihre Hintergrundfarbe zugreifen :

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

Beachten Sie, dass ich im Beispiel :hoverdas Verhalten veranschaulicht habe. Wenn Sie nur die Farbe für den "normalen" Zustand ändern möchten, sollten Sie die Pseudoklasse entfernen.

— Pere
quelle
1

Um die Farbe buchstäblich zu ändern, können Sie einen CSS-Übergang mit einem -webkit-Filter integrieren, bei dem Sie, wenn etwas passiert, den -webkit-Filter Ihrer Wahl aufrufen. Zum Beispiel:

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

Wenn Sie ein Bild von Schwarz zu Weiß oder von Weiß zu Schwarz ändern, funktioniert der Farbtonfilter nicht, da Schwarzweiß technisch gesehen keine Farben sind. Stattdessen müssen Schwarz-Weiß-Farbänderungen (von Schwarz nach Weiß oder umgekehrt) mit der Eigenschaft zum Umkehren des Filters vorgenommen werden.

.img1 { filter: invert(100%); }

— Samuel stankiewicz
quelle
0 

body{
  background: #333 url(/images/classy_fabric.png);
  width: 430px;
  margin: 0 auto;
  padding: 30px;
}
.preview{
  background: #ccc;
  width: 415px;
  height: 430px;
  border: solid 10px #fff;
}

input[type='radio'] {
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 25px;
  height: 25px;
  margin: 5px 0 5px 5px;
  background-size: 225px 70px;
  position: relative;
  float: left;
  display: inline;
  top: 0;
  border-radius: 3px;
  z-index: 99999;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000;
}

input[type='radio']:hover{
  -webkit-filter: opacity(.4);
  filter: opacity(.4);    
}

.red{
  background: red;
}

.red:checked{
  background: linear-gradient(brown, red)
}

.green{
  background: green;
}

.green:checked{
  background: linear-gradient(green, lime);
}

.yellow{
  background: yellow;
}

.yellow:checked{
  background: linear-gradient(orange, yellow);
}

.purple{
  background: purple;
}

.pink{
  background: pink;
}

.purple:checked{
  background: linear-gradient(purple, violet);
}

.red:checked ~ img{
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 red);
  filter: opacity(.5) drop-shadow(0 0 0 red);
}

.green:checked ~ img{
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 green);
  filter: opacity(.5) drop-shadow(0 0 0 green);
}

.yellow:checked ~ img{
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 yellow);
  filter: opacity(.5) drop-shadow(0 0 0 yellow);
}

.purple:checked ~ img{
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 purple);
  filter: opacity(.5) drop-shadow(0 0 0 purple);
}

.pink:checked ~ img{
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 pink);
  filter: opacity(.5) drop-shadow(0 0 0 pink);
}


img{
  width: 394px;
  height: 375px;
  position: relative;
}

.label{
  width: 150px;
  height: 75px;
  position: absolute;
  top: 170px;
  margin-left: 130px;
}

::selection{
  background: #000;
}
<div class="preview">
  <input class='red' name='color' type='radio' />
  <input class='green' name='color' type='radio' />
    <input class='pink' name='color' type='radio' />
  <input checked class='yellow' name='color' type='radio' />
  <input class='purple' name='color' type='radio' />  
  <img src="https://i.stack.imgur.com/bd7VJ.png"/>
</div>
Erweitern Sie das Snippet

Quelle: https://codepen.io/taryaoui/pen/EKkcu

— Bashirpour
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.