it-swarm.com.de

Gibt es eine Möglichkeit, ein weißes PNG-Bild nur mit CSS einzufärben?

Ich weiß, dass es viele CSS-Filter speziell für das Webkit gibt, aber ich kann keine Lösung finden, um ein weißes Bild (#FFFFFF) einzufärben. Ich habe eine Kombination der Filter ausprobiert, aber keiner von ihnen färbt mein Bild ein. Ich kann das Bild nur im Bereich von Graustufen oder Sepia ändern.

Meine Frage lautet also: Gibt es eine Möglichkeit, meine komplett weiße PNG nur mit CSS in (zum Beispiel) Rot zu ändern?

Wie auf diesem Bild gezeigt:

enter image description here

21
Balázs Varga

Dies kann mit CSS-Maskierung geschehen, obwohl die Browserunterstützung leider sehr schlecht ist (ich glaube nur an das Webkit).

http://jsfiddle.net/uw1mu81k/1/

-webkit-mask-box-image: url(http://yourimagehere);

Da Ihr Bild nur weiß ist, ist es ein perfekter Kandidat für die Maskierung. Die Maske funktioniert so, dass das Originalelement immer dann normal angezeigt wird, wenn das Bild weiß ist, während das Originalelement nicht schwarz (oder transparent) dargestellt wird. Alles in der Mitte hat ein gewisses Maß an Transparenz.

[~ # ~] edit [~ # ~] :

Sie können dies auch mit Hilfe von svg in FireFox zum Laufen bringen.

http://jsfiddle.net/uw1mu81k/4/

div {
  width: 50px;
  height: 50px;
  mask: url(#mymask);
  -webkit-mask-box-image: url(http://www.clker.com/cliparts/F/5/I/M/f/U/running-icon-white-on-transparent-background-md.png);
}
<div style="background-color: red;"></div>
<div style="background-color: blue;"></div>
<div style="background-color: green;"></div>
<div style="background-color: orange;"></div>
<div style="background-color: purple;"></div>

<svg height="0" width="0">
  <mask id="mymask">
    <image id="img" xlink:href="http://www.clker.com/cliparts/F/5/I/M/f/U/running-icon-white-on-transparent-background-md.png" x="0" y="0" height="50px" width="50px" />
  </mask>
</svg>
22
James Montagne

Ich habe vor kurzem die gleiche Frage und ich denke, dieser Ansatz ist es wert, für zukünftige Leser geteilt zu werden. Versuche dies

filter: brightness(50%) sepia(100) saturate(100) hue-rotate(25deg);

Durch die Helligkeit wird das Bild abgedunkelt, durch Sepia wird es etwas gelblich, sättigt sich, um die Farbe zu erhöhen, und zuletzt wird durch Drehen des Farbtons die Farbe geändert. Es ist jedoch nicht browserfreundlich:

Hier sind einige nützliche Tipps und Tools, die ich beim Arbeiten mit Bildern/Symbolen mithilfe von CSS verwendet habe:

  • Wenn Sie die SVG-Version des Bildes haben, können Sie sie mit diesem Tool in Schriftsymbole konvertieren https://icomoon.io/ . Um die Farbe zu ändern, brauchen Sie nur color:#f00; Genau wie die Schriftfarben.
  • Wenn Sie diesen Effekt für den Schwebezustand erzielen möchten, verwenden Sie das rote Bild mit filter: brightness(0) invert(); im Nicht-Schwebezustand und filter: brightness(1); im Schwebezustand. Dies funktioniert jedoch immer noch nicht mit dem IE
  • Verwenden Sie das Sprite-Blatt. Sie können sich mit dem Bildbearbeitungsprogramm selbst erstellen oder online verfügbare Sprite-Blattgeneratoren verwenden. Anschließend können Sie SpriteCow verwenden, um die CSS für jedes Teilbild Ihres Spritesheets abzurufen.
16
zekkai

Dies kann mit einem CSS-Filter erfolgen, der auf einen SVG-Filter verweist (Webkit-Browser + Firefox). Hier ist der SVG-Filter.

<svg width="800px" height="600px">
  <filter id="redden">
    <feColorMatrix type="matrix" values="1 1 1 0 0 
                                         0 0 0 0 0 
                                         0 0 0 0 0 
                                         0 0 0 1 0"/>
  </filter>

<image filter="url(#redden)" width="190" height="400" preserveAspectRatio="xMinYMin slice"  xlink:href="http://i.stack.imgur.com/e6MUC.jpg"/>
</svg>
2
Michael Mullany

ich habe versucht, mein weißes wolkenbild nach der antwort von @ zekkai einzufärben, und dann habe ich einen filtergenerator geschrieben.

var slider_huerotate = document.getElementById("slider_huerotate");
var slider_brightness = document.getElementById("slider_brightness");
var slider_saturate = document.getElementById("slider_saturate");
var slider_sepia = document.getElementById("slider_sepia");

var output = document.getElementById("demo");
var cloud =  document.getElementById('cloud');
let [brightness , sepia, saturate, huerotate] = ["100", "80", "100","360"];
var filtercolor = `brightness\(${brightness}%\) sepia\(${sepia}\) saturate\(${saturate}\) hue-rotate\(${huerotate}deg\)`
output.innerHTML = filtercolor; // Display the default slider value
// Update the current slider value (each time you drag the slider handle)
slider_huerotate.oninput = function() {
huerotate = this.value;
var filtercolor = `brightness\(${brightness}%\) sepia\(${sepia}\) saturate\(${saturate}\) hue-rotate\(${huerotate}deg\)`
    cloud.style.filter = filtercolor;
      output.innerHTML = filtercolor;
}

slider_brightness.oninput = function() {
brightness = this.value;
var filtercolor = `brightness\(${brightness}%\) sepia\(${sepia}\) saturate\(${saturate}\) hue-rotate\(${huerotate}deg\)`
    cloud.style.filter = filtercolor;
      output.innerHTML = filtercolor;
}

slider_sepia.oninput = function() {
sepia = this.value;
var filtercolor = `brightness\(${brightness}%\) sepia\(${sepia}\) saturate\(${saturate}\) hue-rotate\(${huerotate}deg\)`
    cloud.style.filter = filtercolor;
      output.innerHTML = filtercolor;
}

slider_saturate.oninput = function() {
saturate = this.value;
var filtercolor = `brightness\(${brightness}%\) sepia\(${sepia}\) saturate\(${saturate}\) hue-rotate\(${huerotate}deg\)`
    cloud.style.filter = filtercolor;
      output.innerHTML = filtercolor;
}
.slider {
    -webkit-appearance: none;
    width: 350px;
    height: 15px;
    border-radius: 5px;   
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%; 
    background: #4CAF50;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #4CAF50;
    cursor: pointer;
}

img{
  width:300px;
  z-index:100;
  filter: brightness(100%) sepia(80) saturate(100) hue-rotate(360deg);
  padding:70px 25px 50px 25px;
}

.wrapper{
  width:600px;
  height:500px;
  padding:50px;
  font-size:small;
}

.slidecontainer_vertical{
    margin-top: 50px;
   transform: translate(0,300px) rotate(270deg);
  -moz-transform: rotate(270deg);

}

.left{
  width:50px;
  height:300px;
  float:left;
}

.cloud{
  width:100%;
}

.middle{
  width:350px;
  height:300px;
  float:left;
  margin:0 auto;
}

.right{
  width:50px;
  height:300px;
  float:left;
}

#demo{
  width:100%;
  text-align:center;
  padding-bottom:20px;
  font-family: 'Handlee', cursive;
  }
<head>
<link href="https://fonts.googleapis.com/css?family=Handlee" rel="stylesheet">
</head>
<div class="wrapper">
<div class='left'>
<div class="slidecontainer_vertical">
  <input type="range" min="0" max="360" value="360" class="slider" id="slider_huerotate">
</div></div>
  <div class=middle>
<div class="slidecontainer">
  <input type="range" min="0" max="100" value="100" class="slider" id="slider_brightness">
</div>
<div id='cloud'>
<img src="https://docs.google.com/drawings/d/e/2PACX-1vQ36u4x5L_01bszwckr2tAGS560HJtQz4qblj0jnvFUPSgyM9DAh7z_L3mmDdF6XRgu8FkTjqJKSNBQ/pub?w=416&amp;h=288"></div>
    <div id='demo'></div>
<div class="slidecontainer">
  <input type="range" min="0" max="100" value="80" class="slider" id="slider_sepia">
</div>
  </div>
<div class='right'>
<div class="slidecontainer_vertical">
  <input type="range" min="0" max="100" value="100" class="slider" id="slider_saturate">
</div></div>
</div>
1
once