[css] Change color of PNG image via CSS?

Given a transparent PNG displaying a simple shape in white, is it possible to somehow change the color of this through CSS? Some kind of overlay or what not?

This question is related to css image colors png overlay

The answer is


You might want to take a look at Icon fonts. http://css-tricks.com/examples/IconFont/

EDIT: I'm using Font-Awesome on my latest project. You can even bootstrap it. Simply put this in your <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">

And then go ahead and add some icon-links like this:

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

Here's the full cheat sheet

--edit--

Font-Awesome uses different class names in the new version, probably because this makes the CSS files drastically smaller, and to avoid ambiguous css classes. So now you should use:

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

EDIT 2:

Just found out github also uses its own icon font: Octicons It's free to download. They also have some tips on how to create your very own icon fonts.


Yes :)

Surfin' Safari - Blog Archive ยป CSS Masks

WebKit now supports alpha masks in CSS. Masks allow you to overlay the content of a box with a pattern that can be used to knock out portions of that box in the final display. In other words, you can clip to complex shapes based off the alpha of an image.
[...]
We have introduced new properties to provide Web designers with a lot of control over these masks and how they are applied. The new properties are analogous to the background and border-image properties that already exist.

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

Think I have a solution for this that's a) exactly what you were looking for 5 years ago, and b) is a bit simpler than the other code options here.

With any white png (eg, white icon on transparent background), you can add an ::after selector to recolor.

.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 */
}

See this codepen (applying the color swap on hover): http://codepen.io/chrscblls/pen/bwAXZO


There's no need for a whole font set if you only need one icon, plus I feel it being more "clean" as an individual element. So, for this purpose, in HTML5 you can place a SVG directly inside the document flow. Then you can define a class in your .CSS stylesheet and access its background color with the fill property:

Working fiddle: http://jsfiddle.net/qmsj0ez1/

Note that, in the example, I've used :hoverto illustrate the behaviour; if you just want to change color for the "normal" state, you should remove the pseudoclass.


I found this while googling, I found best working for me...

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/


The simplest one line that worked for me:

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

You can adjust opacity from 0 to 1 to make color lighter or darker.


I've been able to do this using SVG filter. You can write a filter that multiplies the color of source image with the color you want to change to. In the code snippet below, flood-color is the color we want to change image color to (which is Red in this case.) feComposite tells the filter how we're processing the color. The formula for feComposite with arithmetic is (k1*i1*i2 + k2*i1 + k3*i2 + k4) where i1 and i2 are input colors for in/in2 accordingly. So specifying only k1=1 means it will do just i1*i2, which means multiplying both input colors together.

Note: This only works with HTML5 since this is using inline SVG. But I think you might be able to make this work with older browser by putting SVG in a separate file. I haven't tried that approach yet.

Here's the snippet:

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


When changing a picture from black to white, or white to black the hue rotate filter does not work, because black and white are not technically colors. Instead, black and white color changes (from black to white or vice-versa) must be done with the invert filter property.

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


Answering because I was looking for a solution for this.

the pen in @chrscblls answer works well if you have a white or black background, but mine wasn't. Aslo, the images were generated with ng-repeat, so I couldn't have their url in my css AND you can't use ::after on img tags.

So, I figured a work around and thought it might help people if they too stumble here.

So what I did is pretty much the same with three main differences:

  • the url being in my img tag, I put it(and a label) in another div on which ::after will work.
  • the 'mix-blend-mode' is set at 'difference' instead of 'multiply' or 'screen'.
  • I added a ::before with exactly the same value so the ::after would do the 'difference' of the 'difference' made by the ::before and cancelled it-self.

To change it from black to white or white to black the background color need to be white. From black to colors, you can choose whatever color. From white to colors tho, you'll need to choose the opposite color of the one you want.

.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


I required a specific colour, so filter didn't work for me.

Instead, I created a div, exploiting CSS multiple background images and the linear-gradient function (which creates an image itself). If you use the overlay blend mode, your actual image will be blended with the generated "gradient" image containing your desired colour (here, #BADA55)

_x000D_
_x000D_
.colored-image {_x000D_
        background-image: linear-gradient(to right, #BADA55, #BADA55), url("https://i.imgur.com/lYXT8R6.png");_x000D_
        background-blend-mode: overlay;_x000D_
        background-size: contain;_x000D_
        width: 200px;_x000D_
        height: 200px;        _x000D_
    }
_x000D_
<div class="colored-image"></div>
_x000D_
_x000D_
_x000D_


To literally change the color, you could incorporate a CSS transition with a -webkit-filter where when something happens you would invoke the -webkit-filter of your choice. For example:

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

The img tag has a background property just like any other. If you have a white PNG with a transparent shape, like a stencil, then you can do this:

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

In most browsers, you can use filters :

  • on both <img> elements and background images of other elements

  • and set them either statically in your CSS, or dynamically using JavaScript

See demos below.


<img> elements

You can apply this technique to a <img> element :

_x000D_
_x000D_
#original, #changed {_x000D_
    width: 45%;_x000D_
    padding: 2.5%;_x000D_
    float: left;_x000D_
}_x000D_
_x000D_
#changed {_x000D_
    -webkit-filter : hue-rotate(180deg);_x000D_
    filter : hue-rotate(180deg);_x000D_
}
_x000D_
<img id="original" src="http://i.stack.imgur.com/rfar2.jpg" />_x000D_
_x000D_
<img id="changed" src="http://i.stack.imgur.com/rfar2.jpg" />
_x000D_
_x000D_
_x000D_

Background images

You can apply this technique to a background image :

_x000D_
_x000D_
#original, #changed {_x000D_
    background: url('http://i.stack.imgur.com/kaKzj.jpg');_x000D_
    background-size: cover;_x000D_
    width: 30%;_x000D_
    margin: 0 10% 0 10%;_x000D_
    padding-bottom: 28%;_x000D_
    float: left;_x000D_
}_x000D_
_x000D_
#changed {_x000D_
    -webkit-filter : hue-rotate(180deg);_x000D_
    filter : hue-rotate(180deg);_x000D_
}
_x000D_
<div id="original"></div>_x000D_
_x000D_
<div id="changed"></div>
_x000D_
_x000D_
_x000D_

JavaScript

You can use JavaScript to set a filter at runtime :

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


_x000D_
_x000D_
body{_x000D_
  background: #333 url(/images/classy_fabric.png);_x000D_
  width: 430px;_x000D_
  margin: 0 auto;_x000D_
  padding: 30px;_x000D_
}_x000D_
.preview{_x000D_
  background: #ccc;_x000D_
  width: 415px;_x000D_
  height: 430px;_x000D_
  border: solid 10px #fff;_x000D_
}_x000D_
_x000D_
input[type='radio'] {_x000D_
  -webkit-appearance: none;_x000D_
  -moz-appearance: none;_x000D_
  width: 25px;_x000D_
  height: 25px;_x000D_
  margin: 5px 0 5px 5px;_x000D_
  background-size: 225px 70px;_x000D_
  position: relative;_x000D_
  float: left;_x000D_
  display: inline;_x000D_
  top: 0;_x000D_
  border-radius: 3px;_x000D_
  z-index: 99999;_x000D_
  cursor: pointer;_x000D_
  box-shadow: 1px 1px 1px #000;_x000D_
}_x000D_
_x000D_
input[type='radio']:hover{_x000D_
  -webkit-filter: opacity(.4);_x000D_
  filter: opacity(.4);    _x000D_
}_x000D_
_x000D_
.red{_x000D_
  background: red;_x000D_
}_x000D_
_x000D_
.red:checked{_x000D_
  background: linear-gradient(brown, red)_x000D_
}_x000D_
_x000D_
.green{_x000D_
  background: green;_x000D_
}_x000D_
_x000D_
.green:checked{_x000D_
  background: linear-gradient(green, lime);_x000D_
}_x000D_
_x000D_
.yellow{_x000D_
  background: yellow;_x000D_
}_x000D_
_x000D_
.yellow:checked{_x000D_
  background: linear-gradient(orange, yellow);_x000D_
}_x000D_
_x000D_
.purple{_x000D_
  background: purple;_x000D_
}_x000D_
_x000D_
.pink{_x000D_
  background: pink;_x000D_
}_x000D_
_x000D_
.purple:checked{_x000D_
  background: linear-gradient(purple, violet);_x000D_
}_x000D_
_x000D_
.red:checked ~ img{_x000D_
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 red);_x000D_
  filter: opacity(.5) drop-shadow(0 0 0 red);_x000D_
}_x000D_
_x000D_
.green:checked ~ img{_x000D_
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 green);_x000D_
  filter: opacity(.5) drop-shadow(0 0 0 green);_x000D_
}_x000D_
_x000D_
.yellow:checked ~ img{_x000D_
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 yellow);_x000D_
  filter: opacity(.5) drop-shadow(0 0 0 yellow);_x000D_
}_x000D_
_x000D_
.purple:checked ~ img{_x000D_
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 purple);_x000D_
  filter: opacity(.5) drop-shadow(0 0 0 purple);_x000D_
}_x000D_
_x000D_
.pink:checked ~ img{_x000D_
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 pink);_x000D_
  filter: opacity(.5) drop-shadow(0 0 0 pink);_x000D_
}_x000D_
_x000D_
_x000D_
img{_x000D_
  width: 394px;_x000D_
  height: 375px;_x000D_
  position: relative;_x000D_
}_x000D_
_x000D_
.label{_x000D_
  width: 150px;_x000D_
  height: 75px;_x000D_
  position: absolute;_x000D_
  top: 170px;_x000D_
  margin-left: 130px;_x000D_
}_x000D_
_x000D_
::selection{_x000D_
  background: #000;_x000D_
}
_x000D_
<div class="preview">_x000D_
  <input class='red' name='color' type='radio' />_x000D_
  <input class='green' name='color' type='radio' />_x000D_
    <input class='pink' name='color' type='radio' />_x000D_
  <input checked class='yellow' name='color' type='radio' />_x000D_
  <input class='purple' name='color' type='radio' />  _x000D_
  <img src="https://i.stack.imgur.com/bd7VJ.png"/>_x000D_
</div>
_x000D_
_x000D_
_x000D_

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


I found this great codepen example that you insert your hex color value and it returns the needed filter to apply this color to png

CSS filter generator to convert from black to target hex color

for example i needed my png to have the following color #1a9790

then you have to apply the following filter to you png

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

Examples related to css

need to add a class to an element Using Lato fonts in my css (@font-face) Please help me convert this script to a simple image slider Why there is this "clear" class before footer? How to set width of mat-table column in angular? Center content vertically on Vuetify bootstrap 4 file input doesn't show the file name Bootstrap 4: responsive sidebar menu to top navbar Stylesheet not loaded because of MIME-type Force flex item to span full row width

Examples related to image

Reading images in python Numpy Resize/Rescale Image Convert np.array of type float64 to type uint8 scaling values Extract a page from a pdf as a jpeg How do I stretch an image to fit the whole background (100% height x 100% width) in Flutter? Angular 4 img src is not found How to make a movie out of images in python Load local images in React.js How to install "ifconfig" command in my ubuntu docker image? How do I display local image in markdown?

Examples related to colors

is it possible to add colors to python output? How do I use hexadecimal color strings in Flutter? How do I change the font color in an html table? How do I print colored output with Python 3? Change bar plot colour in geom_bar with ggplot2 in r How can I color a UIImage in Swift? How to change text color and console color in code::blocks? Android lollipop change navigation bar color How to change status bar color to match app in Lollipop? [Android] How to change color of the back arrow in the new material theme?

Examples related to png

Convert UIImage to NSData and convert back to UIImage in Swift? Importing PNG files into Numpy? What is difference between png8 and png24 How to change the background colour's opacity in CSS Darkening an image with CSS (In any shape) Android splash screen image sizes to fit all devices How to convert a SVG to a PNG with ImageMagick? Convert RGBA PNG to RGB with PIL Set transparent background using ImageMagick and commandline prompt Converting a byte array to PNG/JPG

Examples related to overlay

How to overlay image with color in CSS? Youtube autoplay not working on mobile devices with embedded HTML5 player Pure css close button Prevent body scrolling but allow overlay scrolling Change color of PNG image via CSS? How to make overlay control above all other controls? Creating a system overlay window (always on top) Merging two images with PHP overlay opaque div over youtube iframe How to overlay one div over another div