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

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>

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

Answer 2

Die Lösung, die bei mir funktionierte, war die Verwendung von filter: drop-shadow

filter: drop-shadow funktioniert anders als normal box-shadow .

filter man wendet den Schatten auf die reale Form an (daher unterstützt es transparente Bilder).

Der Trick besteht nun darin, das eigentliche Bild zu "verstecken" und nur den Schatten zu zeigen.

https://jsfiddle.net/d4m8x0qb/2

Beachten Sie, dass mein Anwendungsfall das Ändern von Symbolen in eine einzige Farbe ist, so dass dieser Ansatz für mich funktioniert, aber möglicherweise nicht für andere Anwendungsfälle

Answer 3

Wenn Sie nur ein einziges Symbol benötigen, brauchen Sie keinen ganzen Schriftsatz, und ich finde, dass es als einzelnes Element "sauberer" ist. Zu diesem Zweck können Sie in HTML5 ein SVG direkt in den Dokumentfluss einfügen. Dann können Sie eine Klasse in Ihrem CSS-Stylesheet definieren und auf die Hintergrundfarbe mit der Option fill Eigentum:

Arbeitsfiedel: http://jsfiddle.net/qmsj0ez1/

Beachten Sie, dass ich in dem Beispiel Folgendes verwendet habe :hover um das Verhalten zu veranschaulichen; wenn Sie nur die Farbe für den "normalen" Zustand ändern wollen, sollten Sie die Pseudoklasse entfernen.

Answer 4

Um die Farbe buchstäblich 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. Zum Beispiel:

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

Answer 5

Sie könnten verwenden filter: hue-rotate(Ndeg) Wenn es sich jedoch um ein Schwarz-Weiß-Bild handelt, ändert sich der Farbton nicht.

Sie können es jedoch mit folgenden Elementen kombinieren filter: sepia(100) . Dadurch wird dem Bild Farbe hinzugefügt, die die hue-rotate Filter wechseln KANN.

Sepia fügt eine eher entsättigte Farbe hinzu, also verstärken Sie diese ein wenig mit filter: saturate(50); Das macht sie zu einer tieferen Farbe als hue-rotate mit denen man besser arbeiten kann.

Kombinieren Sie sie dann alle zusammen:

filter: sepia(100) saturate(50) hue-rotate(280deg)

Experimentieren Sie dann mit den Rotationsgraden, bis Sie Ihre bevorzugte Farbe gefunden haben.