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?
Change color of PNG image via CSS?
You can use filters with -webkit-filter and filter:
Filters are relatively new to browsers but supported in over 90% of browsers according to the following CanIUse table: https://caniuse.com/#feat=css-filters
You can change an image to grayscale, sepia and lot more (look at the example).
So you can now change the color of a PNG file with filters.
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://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="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"> So short answer is that there isn't any general solution for the majority of browsers. –
Liesa
But will huerotate or saturate actually do anthing to a white image? –
Confectionary
2016 Update: this now works in almost all browsers except IE: caniuse.com/#feat=css-filters –
Serpens
When I try affecting background color of element this way it just gets completely replaced, I expected it to help me achieving hover depending on default bg color easily but it seems that won't work –
Adiaphorism
As nice as all these color filters are, none (or no combination) of them seem to be able to go from white or black to another "vivid" color (e.g. red, green, etc.) :( Maybe I'm missing something? –
Mauer
@Mauer I am using filters to color
png images across a range of vivid colors. hue-rotate and brightness are particularly useful together. For example, to achieve a gold/yellow color: .class-declaration { filter: hue-rotate(-78deg) brightness(1.6); }. If you were to do something like .class-declaration { filter: hue-rotate(-5deg) brightness(0.6); } , you would end up with a green color. There has been no color I cannot attain by messing with these filters. –
Murtha Of course, I should probably mention that all of my
png start off pale green, not white. –
Murtha @Murtha I was very specific, I mentioned black or white. Can you make a combination of filters that takes you to any color starting from pure black or white? –
Mauer
@AsGoodAsItGets: I don't see how starting with a black or white image matters since you could just start with a certain set of properties to appear black, then apply different rules to achieve the desired color. Starting with a green image as I have been doing, you can get black or white by turning the
brightness down to zero or up to more extreme values such as 8, 25, et cetera. From there you can get to any vivid color by adjusting hue-rotate and brightness. If you played around with the CSS in the browser for all of five minutes you'd see that this is possible. –
Murtha @Murtha Sometimes you don't control the starting image yourself. So, it seems that you agree that my point is valid, you can't get to any color starting from black or white. Oh, and I played for way more than 5 minutes to reach this conclusion. –
Mauer
@Murtha Plus, the OP asked specifically about a starting image with white color over transparent background. –
Mauer
@AsGoodAsItGets: No, you're correct, you can't get color out of something that is a combination of all colors or the lack of colors--respectively--with simple filter effects. But for the 98% of the time that you can just pop open PhotoShop and change the base color to something else, you can get any color you want from that starting image. I was merely providing an alternative method that worked for my case and meeting your snarkiness with equal force. –
Murtha
If you are willing to use an alternative method that only works with webkit, you can use masks as other answers suggest but don't demonstrate: codepen.io/datatype_void/pen/mEXaJQ –
Murtha
You can use psuedo-elements with a blending mode to recolor any icon that is 100% black or 100% white (like the OP). See my answer here: https://mcmap.net/q/63413/-change-color-of-png-image-via-css –
Immateriality
also specify that you can do stuff like this :
.gifcorrect{ filter: invert(28%) sepia(100%) hue-rotate(-180deg) saturate(3); } which means you CAN go from black & transparent or grayscale to color and it works even on animated gifs –
Highwrought what of the browser support in 2018AUG? –
Rochester
This answer is inexplicably overrated. If OP was about replacing a given color with a pseudo-random color, that's the answer. –
Cleodal
Some more context here: inserthtml.com/2012/06/css-filters –
Knoll
@Murtha if I want to go to #ff0000 (just an example) from, say, white, is there a table or something that helps me achieve a specific color? –
Ensanguine
This is really helpful! You can have a shitty icon and just colorize it :) –
Whorish
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%);
PS: The codepen is based on this brilliant answer by MultiplyByZer0 here: How to transform black into any given color using only CSS filters
all credits goes to him :clap:
I have change color to white from blue using this code:
filter: invert(1%) sepia(1%) saturate(1%) hue-rotate(1deg) brightness(1000%) contrast(80%); –
Simulator Author deserve a statue! (note the: brightness(0) saturate(100%) optional prepend that kills any doubt) –
Oxazine
Doesnt work. The browser show all filters one by one and stay on contrast –
Malayan
If anyone needs it, here is a TS conversion of this code gist.github.com/dwjohnston/7e60bf5d4b6c071cd869f9f346241c08 –
Mireyamiriam
This works for black backgrounds or images. For white elements, try fiddling with the invert parameter to get the proper color. –
Evetteevey
The codepen is based on this brilliant answer by MultiplyByZer0 here: #42967141 –
Penza
While this is a ingenious piece of code, it's very complex and I don't see how it is actually a good idea to implement this in your live web app. There are new CSS techniques available now like
filter: drop-shadow and mask-image which make it much more trivial to set the overlay of an image to any color without any complex filter manipulation. –
Slone EDIT July 2023: when I wrote this answer, more than 10 years ago, CSS filters where not a thing yet, but now it's quite easy to to drop a shadow on a PNG image, and give it the desired color. Check my new answer here: https://mcmap.net/q/63413/-change-color-of-png-image-via-css
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.
EDIT 3:
Seems like Octicons still exist. However it's no longer available as an icon font but only as a collection of SVG images. SVG is the way to go now, but if you still want to color a PNG image, I came up with this technique: https://mcmap.net/q/63413/-change-color-of-png-image-via-css
+1 for out of the box thinking. And nowadays there are easy to use online apps to help you create a webfont from an (svg) image. –
Elman
If <a class="icon-thumbs-up"></a> is the old class name and <a class="fa fa-thumbs-up"></a> is the new one I don't think it makes the CSS smaller, I can see an additional whitespace between fa and fa-thumbs-up, add atleast 1 additional byte on to that CSS file if I'm not mistaken? –
Lemmueu
Font Awesome was great in it's day, unfortunately its render blocking, which makes google and it's users unhappy. We first addressed this by removing unused fonts from both the CSS and the binary font files, reducing data by around half. We're now in the process of removing altogether and replacing with a simple sprite, which is not render blocking (DOM and CSSOM process faster, making elements on page appear faster), and will reduce data by another 75%, down to 6KB. FA is around 100KB. CSS masks may help in our case, but probably unnecessary. –
Overage
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.
repeat drop-shadow 2-3 times to make it stronger –
Landgrabber
wont work to get exact color, it is always some sort of mix between the original color and the new one. –
Inductor
this approach slightly distorts the image and it gets worse every time drop-shadow is applied. Like making a copy of a copy the results are different from the original. –
Histone
@Inductor Don't repeat the dropshadow, add a saturate filter with >100% so it looks something like "filter: opacity(0.5) drop-shadow(0 0 0 blue) saturate(1000%);" This does everything with a single pass which will solve the issue that SMAG brings up. –
Tody
Nice hack! Allows me to take any of the nouns project pngs and make them whatever color I want, if I drop-shadow twice. –
Ubana
doesnt work for me. first it seems like drop shadows get ignored if set to 0 0 0, plus the drop shadow drops to the same opacity, which means you're also blending in the background color. (firefox) –
Chaqueta
It works, but it's not possible to get a pure blue color. The color of the original image will still be mixed with it. –
Slone
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:
<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="https://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="https://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="https://i.stack.imgur.com/OyP0g.jpg" filter="url(#colorMask3)" />
</svg> Man you are getting robbed on this answer. Anyone looking to colorize images beyond what filter: hue-rotate can do - this is the way to do it. –
Clemence
for icon with alpha, can replace
<feComposite in="SourceGraphic" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" /> with <feComposite in="flood" in2="SourceAlpha" operator="atop"/> (works on white, color and black) –
Tomchay @Tomchay exactly what I was looking for to emulate iOS image tinting - thanks! –
Dys
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)
Is that part of any (yet-to-come) standard, as I didn't found any information unrelated to Webkit, or is it just Apple-flavour? It seems that the W3 is suggesting SVG for such usecases: w3.org/TR/SVG/masking.html –
Lieselotteliestal
Sadly this seems to be webkit only and the blog cheats by using composited images rather than actual examples. This answer is a bit of red herring. –
Si
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
I rehosted the image off of imgur, was having some troubles loading it. –
Immateriality
In the latest version of Chrome, it looks like the (transparent) background is also getting set to the color. In the linked example, when I hover, I just see an opaque pink square... Works well in Firefox. –
Christo
@Immateriality The link is dead. –
Psychoneurotic
In most browsers, you can use filters :
on both
<img>elements and background images of other elementsand 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 :
#original, #changed {
width: 45%;
padding: 2.5%;
float: left;
}
#changed {
-webkit-filter : hue-rotate(180deg);
filter : hue-rotate(180deg);
}<img id="original" src="https://i.stack.imgur.com/rfar2.jpg" />
<img id="changed" src="https://i.stack.imgur.com/rfar2.jpg" />Background images
You can apply this technique to a background image :
#original, #changed {
background: url('https://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
You can use JavaScript to set a filter at runtime :
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('https://i.stack.imgur.com/856IQ.png');
background-size: cover;
padding-bottom: 25%;
}<div id="original"></div>
<div id="changed"></div> The question was about colorizing a white image with a transparent background.
hue-rotate does not work on white. –
Alleviative 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'>
I want the white part colored differently, not the transparent part. –
Floppy
best solution I found so far. Too bad it will only work if you use a solid background-color on your websites –
Slone
@Wesley you need to invert the image then (so the white bit becomes transparent and the rest white) which you can do using your favourite image editor and masks. –
Si
@CharlesGoodwin That only works then the image is placed in a white background. –
Intolerance
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%);
}
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('https://i.stack.imgur.com/gZvK4.png');
}
This works, I voted Up. But just for the record it does have some problems like can´t size the background image, can´t position the image and it does repeat. –
Tarnish
Ohh, I really didn't try those... try below link. developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-box-image thanks, Daniel –
Raja
/* change image color to white */
filter: invert(100%) sepia(16%) saturate(7463%) hue-rotate(222deg) brightness(119%) contrast(115%);
/* change image color to red */`
filter: invert(16%) sepia(99%) saturate(7404%) hue-rotate(4deg) brightness(95%) contrast(118%);
/* change image color to green */
filter: invert(26%) sepia(89%) saturate(1583%) hue-rotate(95deg) brightness(96%) contrast(106%);
/* change image color to blue */
filter: invert(10%) sepia(90%) saturate(5268%) hue-rotate(245deg) brightness(109%) contrast(155%);
I just played with your samples and got what I wanted. Thanks. –
Aplite
How were these colors calculated? I'd like to try other colors but can't work out how to generalize this. –
Fanning
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
Since I posted this answer I made an other pen using a different method :
* {
box-sizing: border-box;
}
body {
background-color: CadetBlue;
font-family: "Lato", sans-serif;
text-align: center;
}
button {
display: flex;
justify-content: center;
min-width: 182px;
padding: 0.5em 1em;
margin: 2em auto;
cursor: pointer;
pointer-events: auto;
border-radius: 4px;
border: none;
background: #85b5b7;
box-shadow: 0 6px #6fa8aa;
}
label {
font-weight: 400;
font-size: 24px;
margin: auto 0;
color: white;
}
.icon {
height: 64px;
width: 64px;
background-color: white;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: left center;
mask-position: left center;
-webkit-mask-size: auto 48px;
mask-size: auto 48px;
mask-mode: luminance;
-webkit-mask-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Bubbles-alt-icon.png/640px-Bubbles-alt-icon.png");
mask-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Bubbles-alt-icon.png/640px-Bubbles-alt-icon.png");
}
button label span {
color: #395f60;
}
button:hover {
color: #395f60;
transform: translatey(4px);
box-shadow: 0 2px #6fa8aa;
}
button:hover .icon {
background-color: #395f60;
}<button>
<div class="icon"></div>
<label> white to <span>color</span></label>
</button> This solution does not allow anything to be 'under the icon' as it has solid background when changing the color –
Crucifer
On the codepen linked, there's a link to an updated version using mask which works better and solve that problem. –
Tomchay
@AdamPietrasiak Added link to pen and a snippet example. This method allow things under and, once every other browser catch up to firefox, to use luminence as alpha too! –
Tomchay
oops haha, forgot what my original problem was, and this doesn't fix it since I couldn't have the url in my css... Well, guess I can add it with JS but I liked that I didn't have to ^^' –
Tomchay
Try this:
-webkit-filter: brightness(0) invert(1);
filter: brightness(0) invert(1);
Use 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 #EF8C57
then you have to apply the following filter to you png Result:
filter: invert(76%) sepia(30%) saturate(3461%) hue-rotate(321deg) brightness(98%) contrast(91%);
Did you forget to link the codepen example? However, it's better to use the stack snippet to include all the code in the answer. –
Babism
codepen.io/sosuke/pen/Pjoqqp –
Godoy
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)
.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> Didn't work for me. I can't tell why, I copy pasted exactly –
Utility
@VicSeedoubleyew the snippet works fine. Inspect your div using dev tools to ensure your CSS is actually being applied. Also, make sure the URL to your image is valid if you're not using the one I provided. EDIT: If the snippet doesn't work for you, you might be using a browser that is either out of date or doesn't support the linear-gradient function. –
Tonedeaf
Edit august 2023: This answer can cause problems in iOS. Seems like iPhones can cut off or not display the shadow at all, because it doesn't find the original image inside the viewport. If this solution isn't working for you check out this one which seems to work fine on all platforms and in all browsers (except IE but who cares): https://mcmap.net/q/63413/-change-color-of-png-image-via-css
You can drop a shadow with any color you like, and move the original image out of view.
.png-container {
overflow: hidden;
}
.png-container img {
filter: drop-shadow(0px 1000px 0 red);
transform: translateY(-1000px);
}<div class="png-container">
<img src="https://i0.wp.com/opensource.org/wp-content/uploads/2023/03/cropped-OSI-horizontal-large.png?fit=640%2C229&ssl=1" width="128" height="46">
</div>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>The solution that worked for me was using filter: drop-shadow
filter: drop-shadow works differently than regular box-shadow.
filter one applies shadow to real shape (so it supports transparent images).
The trick now is to 'hide' real image and show only the shadow.
https://jsfiddle.net/d4m8x0qb/2
Note that my use case is modifying icons colors into one, solid color, so this approach works for me, but might not for other use cases
I noticed this solution can cause problems on iOS. If the moved image is not completely inside the viewport when the page is loaded, then the image will get cut of or not display at all. So this solution should only be used if you don't move the image too far away and guarantee it is inside the viewport when the shadow is visible. –
Slone
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.
Anti-answer: Black shapes
This is improvement of Vasan answer for PNG with black shapes - use svg <image> tag and define filter (svg filters are more powerfull than css filters)
<svg>
<defs>
<filter id="colorMask">
<feFlood flood-color="#ff0000" result="flood" />
<feColorMatrix result="inv" in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0" />
<feComposite in="inv" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
</filter>
</defs>
<image filter="url(#colorMask)" xlink:href="pic.png" />
</svg>
<svg width=37px height=36px>
<defs>
<filter id="colorMask">
<feFlood flood-color="#ff0000" result="flood" />
<feColorMatrix result="inv" in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0" />
<feComposite in="inv" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
</filter>
</defs>
<image filter="url(#colorMask)" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACUAAAAkBAMAAAD87O6VAAAACXBIWXMAAAsSAAALEgHS3X78AAAALVBMVEUAAABHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADMHXDdAAAAD3RSTlPAAIBAMNAgsOBQYKAQkHD2u9I6AAAAh0lEQVQoz2OwYEAHBQxGguiAYaDFrAMY2heiiiUUCwqKqU5EFhNpBpEyvMhiHo5gnrQiklgI1PhghJiUIlTMASEmehAqJu4IF0uHOQ2sASIGd7cYI1xME+4H/GLY9GKzA5tbsLkZ5jeZECxh8BA5rDrBtjKhhiknRpiCwz584SBJByhiWNIuAFBkOlCFUBO4AAAAAElFTkSuQmCC" />
</svg>
<!-- Original image with black shapes (for comparision) -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACUAAAAkBAMAAAD87O6VAAAACXBIWXMAAAsSAAALEgHS3X78AAAALVBMVEUAAABHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADMHXDdAAAAD3RSTlPAAIBAMNAgsOBQYKAQkHD2u9I6AAAAh0lEQVQoz2OwYEAHBQxGguiAYaDFrAMY2heiiiUUCwqKqU5EFhNpBpEyvMhiHo5gnrQiklgI1PhghJiUIlTMASEmehAqJu4IF0uHOQ2sASIGd7cYI1xME+4H/GLY9GKzA5tbsLkZ5jeZECxh8BA5rDrBtjKhhiknRpiCwz584SBJByhiWNIuAFBkOlCFUBO4AAAAAElFTkSuQmCC">For Solid Images you can use this website just paste your color and copy filter and paste on image class in css and color of image will be changed accordingly. In this case the images is in red color with filter it changed to yellow. It is very use full in case of svg images.
img{
filter: brightness(0) saturate(100%) invert(70%) sepia(97%) saturate(925%) hue-rotate(353deg) brightness(102%) contrast(102%);
width: 400px;
}<div>
<img class=my_img" src="https://images.twinkl.co.uk/tr/image/upload/t_illustration/illustation/particle-arrangement-in-a-solid.png">
</div>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%);
}
You could use filter: hue-rotate(Ndeg), but if the image is black and white, the hue will never change.
However, you could combine it with filter: sepia(100). That will add color to the image that the hue-rotate filter CAN change.
Sepia adds a rather desaturated color, so enhance that a bit with filter: saturate(50); That makes it a deeper color that hue-rotate can better work with.
Then combine them all together:
filter: sepia(100) saturate(50) hue-rotate(280deg)
Then experiment with the rotation degrees until you find your preferred color.
It's a way I use and works perfectly:
.RedImage {
filter:
brightness(1000%) grayscale(100%) /* To change the image color to the white */
opacity(0.1) /* To apply the color all over the image */
drop-shadow(0 0 0 red) /* To apply my costum color */
drop-shadow(0 0 0 red) /* To apply my costum color more stronger */
drop-shadow(0 0 0 red)
drop-shadow(0 0 0 red)
drop-shadow(0 0 0 red);
}<img class="RedImage" height="50px" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png" />Enjoy...
Works, but applying multiple stacks of drop-shadow seems to decrease the sharpness of the image. Also, I wasn't able to make an image 100% white with this approach. –
Slone
You can use -webkit-mask-image if you modify your HTML a bit.
Instead of <img src="my-image.png">, wrap it like this:
<span class="masked" style="-webkit-mask-image: url('my-image.png');">
<img src="my-image.png"/>
</span>
Then add this CSS if you want to give it the color #ff0000:
.masked {
display: inline-block;
background-color: #ff0000;
-webkit-mask-size: 95%; /* edges might get cut off if you use 100% */
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}
.masked > img {
opacity: 0;
display:block;
}
Fully working example:
.masked {
display: inline-block;
background-color: red;
-webkit-mask-size: 95%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}
.masked > img {
opacity: 0;
width: auto;
display:block;
}<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/16/Firefox_logo%2C_2017.png/581px-Firefox_logo%2C_2017.png?20170928063359" height="100" />
<span class="masked" style="-webkit-mask-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/1/16/Firefox_logo%2C_2017.png/581px-Firefox_logo%2C_2017.png?20170928063359');"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/16/Firefox_logo%2C_2017.png/581px-Firefox_logo%2C_2017.png?20170928063359" height="100" /></span>
<span class="masked" style="-webkit-mask-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/1/16/Firefox_logo%2C_2017.png/581px-Firefox_logo%2C_2017.png?20170928063359'); background-color: blue;"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/16/Firefox_logo%2C_2017.png/581px-Firefox_logo%2C_2017.png?20170928063359" height="100" /></span>
<span class="masked" style="-webkit-mask-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/1/16/Firefox_logo%2C_2017.png/581px-Firefox_logo%2C_2017.png?20170928063359'); background-color: orange;"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/16/Firefox_logo%2C_2017.png/581px-Firefox_logo%2C_2017.png?20170928063359" height="100" /></span>More examples: https://codepen.io/pwkip/pen/BaGMRjK
brilliant! I spent the whole day looking for a solution to display external(!) SVG icons in a custom color, wasted hours trying overly complicated filter calculations, failed on <object/>, <svg/>...and then found THIS comment which has not yet received any upvotes! Thank you very much for your contribution! (b.t.w., I think you could even do without the <img/> element - I am just using a <div/> for the masked background) –
Carpogonium
Thanks! The cool thing about keeping the image tag is that you can drag the image to your desktop if you want to save it (default img behaviour). If you don't need that I guess it could work with only specifying the image url in the mask –
Slone
- If the image is simple like vector images, you can converted to SVG and do CSS changes there.
- Another option make the image PNG, and change a specific color to transparent (like cut-outs) and change the background color using CSS.
Edit: i got confused as to my solution.. you dont gotta change the image at all. just use the png you wanted to. just make a blank image tag with the dimensions you want.
<img class="image" width="x" height="y"/>
then in css you can
.image {
background-color: rgba(); <--color you wanted the png to be
-webkit-mask-image: url(/image.png);
mask-image: url(/image.png);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: 100%;
mask-size: 100%;
}
this allows you to change the BG color at will to whatever you want, but it will be in the shape of the blank/white png. results example
Currently this is possible using masks in CSS. The idea is to simply create a div completely filled with a solid color using 'background-color'. After that we put a mask on it with the exact size of the sister image. That's why it's necessary to use 'fit-content'.
It is also recommended that you look at browser support for 'fit-content', 'mask-image' and 'mask-size' as they do not work in older browsers.
HTML:
<div class="img-color-fill">
<div></div>
<img src="image.png|svg">
</div>
CSS:
.img-color-fill {
position: relative;
width: fit-content;
height: fit-content;
line-height: 0;
}
.img-color-fill div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: red;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-image: url("image.png"); /* works with svg too */
mask-image: url("image.png"); /* works with svg too */
}
.img-color-fill img {
width: 256px;
height: auto;
opacity: 0;
}
Example:
.img-color-fill {
position: relative;
width: fit-content;
height: fit-content;
line-height: 0;
}
.img-color-fill div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: red;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI1NiA1MSI+Cgk8cGF0aCBmaWxsPSIjMjIyNDI2IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Im02MyAzNi43YzAgMy41LTMuMiA1LjYtNy42IDUuNi0yLjcgMC4yLTUuNC0wLjctNy41LTIuNmwxLjgtMS44YzEuNSAxLjUgMy42IDIuMyA1LjcgMi4yIDMuMSAwIDUtMS4xIDUtMy4zIDAtMS43LTAuOC0yLjYtMy0yLjhsLTMuMS0wLjJjLTMuNS0wLjMtNS40LTItNS40LTUgMC0zLjMgMi43LTUuNCA2LjctNS40cTAuOSAwIDEuNyAwLjEgMC45IDAuMSAxLjcgMC4zIDAuOSAwLjMgMS43IDAuNyAwLjcgMC4zIDEuNSAwLjlsLTEuOCAxLjhjLTEuNC0xLjEtMy4yLTEuNy01LTEuNi0yLjcgMC00LjEgMS4xLTQuMSAzLjEgMCAxLjYgMC45IDIuNiAzLjIgMi43bDMgMC4zYzMuMyAwLjMgNS41IDEuNCA1LjUgNXptMjMuNy03LjJ2MTIuNWgtMi44di0xLjhjLTEuNCAxLjQtMy40IDIuMS01LjMgMi0yLjYgMC00LjEtMC40LTUuMi0xLjctMS0wLjktMS40LTIuMy0xLjQtMy43IDAtMy4zIDIuMi01LjQgNi4zLTUuNGg1LjV2LTEuOGMwLTIuNi0xLjMtNC00LjctNHEtMC42IDAtMS4zIDAtMC43IDAuMS0xLjMgMC40LTAuNiAwLjMtMS4xIDAuNy0wLjUgMC41LTAuOSAxbC0xLjgtMS44YzEuNi0yLjEgMy40LTIuNiA2LjQtMi42IDUgMCA3LjQgMi4yIDcuNiA2LjJ6bS0yLjkgNGgtNS4ycS00LjEgMC00LjEgMy4zYzAgMi4yIDEuMyAzLjIgNC4yIDMuMnEwLjYgMCAxLjEgMCAwLjYtMC4xIDEuMS0wLjIgMC41LTAuMiAxLTAuNCAwLjUtMC4zIDAuOS0wLjdjMC44LTAuOCAxLjEtMiAxLTMuMXptOS01LjdxLTEuNCAyLjMtMS4yIDUtMC4yIDIuNyAxLjIgNC45YzEgMS40IDIuNiAyLjIgNC4zIDIuMSAxLjYgMCAzLjItMC43IDQuMi0yLjFsMS44IDEuOGMtMS41IDEuOC0zLjcgMi45LTYgMi44LTQuNiAwLTguMS0zLjItOC4xLTkuNSAwLTYuNCAzLjQtOS41IDguMS05LjVxMC44LTAuMSAxLjcgMC4xIDAuOCAwLjIgMS42IDAuNSAwLjggMC40IDEuNSAwLjkgMC42IDAuNSAxLjIgMS4ybC0xLjggMS44Yy0xLTEuNC0yLjYtMi4xLTQuMi0yLjEtMS43LTAuMS0zLjMgMC43LTQuMyAyLjF6bTIwLjcgMi40bDcuNyAxMS44aC0zLjNsLTYuMi0xMC4xLTMuMyAzLjR2Ni43aC0yLjd2LTI2LjdoMi43djE2LjRsOC40LTguMmgzLjN6bTIwLjgtNi44cTAuOCAwLjEgMS41IDAuNSAwLjggMC4zIDEuNSAwLjcgMC43IDAuNSAxLjIgMS4xYzEuOCAxLjkgMi4yIDQgMi4yIDcuNCAwIDMuNS0wLjQgNS43LTIuMiA3LjUtMS41IDEuNi0zLjcgMi41LTUuOSAyLjNxLTAuOCAwLTEuNi0wLjEtMC44LTAuMi0xLjUtMC41LTAuOC0wLjMtMS41LTAuNy0wLjctMC41LTEuMy0xYy0xLjctMS44LTIuMi00LTIuMi03LjUgMC0zLjMgMC41LTUuNiAyLjItNy40IDEuNS0xLjcgMy43LTIuNCA1LjktMi40cTAuOCAwIDEuNyAwLjF6bTEuNyA5LjdjMC0xLjktMC4xLTMuNy0xLTQuNy0xLjMtMS4xLTMuMi0xLjEtNC40IDAtMSAxLTEuMSAyLjgtMS4xIDQuNyAwIDIgMC4xIDMuOCAxLjEgNC43IDEuMiAxLjEgMy4xIDEuMSA0LjQgMCAwLjktMC45IDEtMi42IDEtNC43em0yMi42LTkuNmwtNi45IDE5LjNoLTMuN2wtNy4yLTE5LjNoNS4xbDMuOCAxMS44IDMuOS0xMS44em04LTAuMmM1LjQgMCA4LjQgMy45IDguMyA5LjF2Mi4yaC0xMS45djAuNnEwIDAuOCAwLjQgMS41IDAuNCAwLjcgMC45IDEuMiAwLjYgMC41IDEuNCAwLjggMC43IDAuMyAxLjUgMC4yYzEuNiAwLjIgMy4zLTAuNSA0LjQtMS42bDIuOSAyLjdjLTEuOCAyLjEtNC42IDMuMi03LjMgMy4xLTQuNSAwLTguOS0yLjEtOC45LTEwIDAtNi4yIDMuNC05LjYgOC4zLTkuNnptMy41IDhsLTAuNC0yLjFjLTAuNi0xLjItMS44LTEuOS0zLjItMS45LTEuNCAwLTIuNiAwLjctMy4xIDEuOWwtMC40IDIuMXptMTEuMi01LjljMS4yLTEuNCAzLTIgNC44LTJxMC42IDAgMS4yIDAuMSAwLjYgMC4xIDEuMiAwLjMgMC41IDAuMyAxIDAuNiAwLjUgMC40IDAuOSAwLjhsLTMuNSAzLjZjLTAuNi0wLjctMS41LTEuMS0yLjUtMS4xaC0wLjJjLTEuOCAwLjMtMi45IDEuOC0yLjkgMy42djExLjZoLTQuOHYtMTkuM2g0LjZ2MS44em0xMC4zLTQuM3EwLTEuMSAwLjUtMi4xIDAuNC0wLjkgMS4yLTEuNyAwLjctMC43IDEuNy0xLjEgMS0wLjQgMi4xLTAuNGgyLjd2NC4yaC0yYy0xIDAuMS0xLjQgMC45LTEuNCAxLjh2MmgzLjZ2My44aC0zLjZ2MTUuMWgtNC44em0yOS40IDIuM3EwLjggMC4xIDEuNiAwLjQgMC44IDAuMyAxLjQgMC44IDAuNyAwLjUgMS4zIDEuMWMxLjggMS45IDIuMiA0IDIuMiA3LjQgMCAzLjUtMC40IDUuNy0yLjIgNy41LTEuNSAxLjYtMy43IDIuNC01LjkgMi4zcS0wLjggMC0xLjYtMC4xLTAuOC0wLjItMS42LTAuNS0wLjctMC4zLTEuNC0wLjctMC43LTAuNS0xLjMtMWMtMS44LTEuOC0yLjItNC0yLjItNy41IDAtMy4zIDAuNC01LjYgMi4yLTcuNCAxLjUtMS43IDMuNy0yLjQgNS45LTIuNHEwLjggMCAxLjYgMC4xem0xLjggOS43YzAtMS45LTAuMS0zLjctMS4xLTQuNy0xLjItMS4xLTMuMS0xLjEtNC40IDAtMC45IDEtMS4xIDIuOC0xLjEgNC43IDAgMS45IDAuMiAzLjcgMS4xIDQuNyAxLjMgMS4xIDMuMiAxLjEgNC40IDAgMS0xIDEuMS0yLjYgMS4xLTQuN3ptMjcuMy05LjVoNS4ybC01LjkgMTkuM2gtNC4xbC00LTEyLjEtNCAxMi4xaC0zLjlsLTUuOS0xOS4zaDVsMy4yIDExLjkgMy44LTEyaDMuNGw0IDExLjggMy4yLTExLjh6bS00Mi43IDEzLjljMC4yIDAuOCAwLjkgMS4yIDEuNyAxLjFoMS44djQuMWgtMy40cS0xIDAtMi0wLjUtMC45LTAuNC0xLjYtMS4yLTAuNy0wLjgtMS4xLTEuOC0wLjMtMC45LTAuMi0ydi0yMS4yaDQuOHptLTEzNy44LTExLjJoLTIuNnYxMC42YzAgMS44IDAuNyAyLjggMi41IDIuOGgxLjR2Mi4zaC0yYy0zLjEgMC00LjYtMi4yLTQuNi00Ljl2LTE5LjJoMi43djYuMWg1LjF6Ii8+Cgk8cGF0aCBmaWxsPSIjYmNiYmJiIiBkPSJtMzUuNiA0NS41di0xMi40aDUuNXYxNy45aC00MS4xdi0xNy45aDUuNXYxMi40eiIvPgoJPHBhdGggZmlsbD0iI2Y0ODAyNCIgZD0ibTMxLjUgMzUuOGwxLjEtNC4xLTIyLjEtNC41LTAuOSA0LjV6bS0xOC45LTE0LjlsMjAuNSA5LjcgMS45LTQuMi0yMC41LTkuNnptNS44LTEwLjJsMTcuMiAxNC42IDIuOS0zLjUtMTcuNC0xNC42LTIuOSAzLjV6bTExLjEtMTAuOGwtMy43IDIuOCAxMy42IDE4LjMgMy43LTIuN3ptLTE5LjkgMzcuMmgyMS45djQuMWgtMjEuOXoiLz4KPC9zdmc+");
mask-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI1NiA1MSI+Cgk8cGF0aCBmaWxsPSIjMjIyNDI2IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Im02MyAzNi43YzAgMy41LTMuMiA1LjYtNy42IDUuNi0yLjcgMC4yLTUuNC0wLjctNy41LTIuNmwxLjgtMS44YzEuNSAxLjUgMy42IDIuMyA1LjcgMi4yIDMuMSAwIDUtMS4xIDUtMy4zIDAtMS43LTAuOC0yLjYtMy0yLjhsLTMuMS0wLjJjLTMuNS0wLjMtNS40LTItNS40LTUgMC0zLjMgMi43LTUuNCA2LjctNS40cTAuOSAwIDEuNyAwLjEgMC45IDAuMSAxLjcgMC4zIDAuOSAwLjMgMS43IDAuNyAwLjcgMC4zIDEuNSAwLjlsLTEuOCAxLjhjLTEuNC0xLjEtMy4yLTEuNy01LTEuNi0yLjcgMC00LjEgMS4xLTQuMSAzLjEgMCAxLjYgMC45IDIuNiAzLjIgMi43bDMgMC4zYzMuMyAwLjMgNS41IDEuNCA1LjUgNXptMjMuNy03LjJ2MTIuNWgtMi44di0xLjhjLTEuNCAxLjQtMy40IDIuMS01LjMgMi0yLjYgMC00LjEtMC40LTUuMi0xLjctMS0wLjktMS40LTIuMy0xLjQtMy43IDAtMy4zIDIuMi01LjQgNi4zLTUuNGg1LjV2LTEuOGMwLTIuNi0xLjMtNC00LjctNHEtMC42IDAtMS4zIDAtMC43IDAuMS0xLjMgMC40LTAuNiAwLjMtMS4xIDAuNy0wLjUgMC41LTAuOSAxbC0xLjgtMS44YzEuNi0yLjEgMy40LTIuNiA2LjQtMi42IDUgMCA3LjQgMi4yIDcuNiA2LjJ6bS0yLjkgNGgtNS4ycS00LjEgMC00LjEgMy4zYzAgMi4yIDEuMyAzLjIgNC4yIDMuMnEwLjYgMCAxLjEgMCAwLjYtMC4xIDEuMS0wLjIgMC41LTAuMiAxLTAuNCAwLjUtMC4zIDAuOS0wLjdjMC44LTAuOCAxLjEtMiAxLTMuMXptOS01LjdxLTEuNCAyLjMtMS4yIDUtMC4yIDIuNyAxLjIgNC45YzEgMS40IDIuNiAyLjIgNC4zIDIuMSAxLjYgMCAzLjItMC43IDQuMi0yLjFsMS44IDEuOGMtMS41IDEuOC0zLjcgMi45LTYgMi44LTQuNiAwLTguMS0zLjItOC4xLTkuNSAwLTYuNCAzLjQtOS41IDguMS05LjVxMC44LTAuMSAxLjcgMC4xIDAuOCAwLjIgMS42IDAuNSAwLjggMC40IDEuNSAwLjkgMC42IDAuNSAxLjIgMS4ybC0xLjggMS44Yy0xLTEuNC0yLjYtMi4xLTQuMi0yLjEtMS43LTAuMS0zLjMgMC43LTQuMyAyLjF6bTIwLjcgMi40bDcuNyAxMS44aC0zLjNsLTYuMi0xMC4xLTMuMyAzLjR2Ni43aC0yLjd2LTI2LjdoMi43djE2LjRsOC40LTguMmgzLjN6bTIwLjgtNi44cTAuOCAwLjEgMS41IDAuNSAwLjggMC4zIDEuNSAwLjcgMC43IDAuNSAxLjIgMS4xYzEuOCAxLjkgMi4yIDQgMi4yIDcuNCAwIDMuNS0wLjQgNS43LTIuMiA3LjUtMS41IDEuNi0zLjcgMi41LTUuOSAyLjNxLTAuOCAwLTEuNi0wLjEtMC44LTAuMi0xLjUtMC41LTAuOC0wLjMtMS41LTAuNy0wLjctMC41LTEuMy0xYy0xLjctMS44LTIuMi00LTIuMi03LjUgMC0zLjMgMC41LTUuNiAyLjItNy40IDEuNS0xLjcgMy43LTIuNCA1LjktMi40cTAuOCAwIDEuNyAwLjF6bTEuNyA5LjdjMC0xLjktMC4xLTMuNy0xLTQuNy0xLjMtMS4xLTMuMi0xLjEtNC40IDAtMSAxLTEuMSAyLjgtMS4xIDQuNyAwIDIgMC4xIDMuOCAxLjEgNC43IDEuMiAxLjEgMy4xIDEuMSA0LjQgMCAwLjktMC45IDEtMi42IDEtNC43em0yMi42LTkuNmwtNi45IDE5LjNoLTMuN2wtNy4yLTE5LjNoNS4xbDMuOCAxMS44IDMuOS0xMS44em04LTAuMmM1LjQgMCA4LjQgMy45IDguMyA5LjF2Mi4yaC0xMS45djAuNnEwIDAuOCAwLjQgMS41IDAuNCAwLjcgMC45IDEuMiAwLjYgMC41IDEuNCAwLjggMC43IDAuMyAxLjUgMC4yYzEuNiAwLjIgMy4zLTAuNSA0LjQtMS42bDIuOSAyLjdjLTEuOCAyLjEtNC42IDMuMi03LjMgMy4xLTQuNSAwLTguOS0yLjEtOC45LTEwIDAtNi4yIDMuNC05LjYgOC4zLTkuNnptMy41IDhsLTAuNC0yLjFjLTAuNi0xLjItMS44LTEuOS0zLjItMS45LTEuNCAwLTIuNiAwLjctMy4xIDEuOWwtMC40IDIuMXptMTEuMi01LjljMS4yLTEuNCAzLTIgNC44LTJxMC42IDAgMS4yIDAuMSAwLjYgMC4xIDEuMiAwLjMgMC41IDAuMyAxIDAuNiAwLjUgMC40IDAuOSAwLjhsLTMuNSAzLjZjLTAuNi0wLjctMS41LTEuMS0yLjUtMS4xaC0wLjJjLTEuOCAwLjMtMi45IDEuOC0yLjkgMy42djExLjZoLTQuOHYtMTkuM2g0LjZ2MS44em0xMC4zLTQuM3EwLTEuMSAwLjUtMi4xIDAuNC0wLjkgMS4yLTEuNyAwLjctMC43IDEuNy0xLjEgMS0wLjQgMi4xLTAuNGgyLjd2NC4yaC0yYy0xIDAuMS0xLjQgMC45LTEuNCAxLjh2MmgzLjZ2My44aC0zLjZ2MTUuMWgtNC44em0yOS40IDIuM3EwLjggMC4xIDEuNiAwLjQgMC44IDAuMyAxLjQgMC44IDAuNyAwLjUgMS4zIDEuMWMxLjggMS45IDIuMiA0IDIuMiA3LjQgMCAzLjUtMC40IDUuNy0yLjIgNy41LTEuNSAxLjYtMy43IDIuNC01LjkgMi4zcS0wLjggMC0xLjYtMC4xLTAuOC0wLjItMS42LTAuNS0wLjctMC4zLTEuNC0wLjctMC43LTAuNS0xLjMtMWMtMS44LTEuOC0yLjItNC0yLjItNy41IDAtMy4zIDAuNC01LjYgMi4yLTcuNCAxLjUtMS43IDMuNy0yLjQgNS45LTIuNHEwLjggMCAxLjYgMC4xem0xLjggOS43YzAtMS45LTAuMS0zLjctMS4xLTQuNy0xLjItMS4xLTMuMS0xLjEtNC40IDAtMC45IDEtMS4xIDIuOC0xLjEgNC43IDAgMS45IDAuMiAzLjcgMS4xIDQuNyAxLjMgMS4xIDMuMiAxLjEgNC40IDAgMS0xIDEuMS0yLjYgMS4xLTQuN3ptMjcuMy05LjVoNS4ybC01LjkgMTkuM2gtNC4xbC00LTEyLjEtNCAxMi4xaC0zLjlsLTUuOS0xOS4zaDVsMy4yIDExLjkgMy44LTEyaDMuNGw0IDExLjggMy4yLTExLjh6bS00Mi43IDEzLjljMC4yIDAuOCAwLjkgMS4yIDEuNyAxLjFoMS44djQuMWgtMy40cS0xIDAtMi0wLjUtMC45LTAuNC0xLjYtMS4yLTAuNy0wLjgtMS4xLTEuOC0wLjMtMC45LTAuMi0ydi0yMS4yaDQuOHptLTEzNy44LTExLjJoLTIuNnYxMC42YzAgMS44IDAuNyAyLjggMi41IDIuOGgxLjR2Mi4zaC0yYy0zLjEgMC00LjYtMi4yLTQuNi00Ljl2LTE5LjJoMi43djYuMWg1LjF6Ii8+Cgk8cGF0aCBmaWxsPSIjYmNiYmJiIiBkPSJtMzUuNiA0NS41di0xMi40aDUuNXYxNy45aC00MS4xdi0xNy45aDUuNXYxMi40eiIvPgoJPHBhdGggZmlsbD0iI2Y0ODAyNCIgZD0ibTMxLjUgMzUuOGwxLjEtNC4xLTIyLjEtNC41LTAuOSA0LjV6bS0xOC45LTE0LjlsMjAuNSA5LjcgMS45LTQuMi0yMC41LTkuNnptNS44LTEwLjJsMTcuMiAxNC42IDIuOS0zLjUtMTcuNC0xNC42LTIuOSAzLjV6bTExLjEtMTAuOGwtMy43IDIuOCAxMy42IDE4LjMgMy43LTIuN3ptLTE5LjkgMzcuMmgyMS45djQuMWgtMjEuOXoiLz4KPC9zdmc+");
}
.img-color-fill img {
width: 256px;
height: auto;
opacity: 0;
}<div class="img-color-fill">
<div></div>
<img src="data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDI1NiA1MSI+Cgk8cGF0aCBmaWxsPSIjMjIyNDI2IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Im02MyAzNi43YzAgMy41LTMuMiA1LjYtNy42IDUuNi0yLjcgMC4yLTUuNC0wLjctNy41LTIuNmwxLjgtMS44YzEuNSAxLjUgMy42IDIuMyA1LjcgMi4yIDMuMSAwIDUtMS4xIDUtMy4zIDAtMS43LTAuOC0yLjYtMy0yLjhsLTMuMS0wLjJjLTMuNS0wLjMtNS40LTItNS40LTUgMC0zLjMgMi43LTUuNCA2LjctNS40cTAuOSAwIDEuNyAwLjEgMC45IDAuMSAxLjcgMC4zIDAuOSAwLjMgMS43IDAuNyAwLjcgMC4zIDEuNSAwLjlsLTEuOCAxLjhjLTEuNC0xLjEtMy4yLTEuNy01LTEuNi0yLjcgMC00LjEgMS4xLTQuMSAzLjEgMCAxLjYgMC45IDIuNiAzLjIgMi43bDMgMC4zYzMuMyAwLjMgNS41IDEuNCA1LjUgNXptMjMuNy03LjJ2MTIuNWgtMi44di0xLjhjLTEuNCAxLjQtMy40IDIuMS01LjMgMi0yLjYgMC00LjEtMC40LTUuMi0xLjctMS0wLjktMS40LTIuMy0xLjQtMy43IDAtMy4zIDIuMi01LjQgNi4zLTUuNGg1LjV2LTEuOGMwLTIuNi0xLjMtNC00LjctNHEtMC42IDAtMS4zIDAtMC43IDAuMS0xLjMgMC40LTAuNiAwLjMtMS4xIDAuNy0wLjUgMC41LTAuOSAxbC0xLjgtMS44YzEuNi0yLjEgMy40LTIuNiA2LjQtMi42IDUgMCA3LjQgMi4yIDcuNiA2LjJ6bS0yLjkgNGgtNS4ycS00LjEgMC00LjEgMy4zYzAgMi4yIDEuMyAzLjIgNC4yIDMuMnEwLjYgMCAxLjEgMCAwLjYtMC4xIDEuMS0wLjIgMC41LTAuMiAxLTAuNCAwLjUtMC4zIDAuOS0wLjdjMC44LTAuOCAxLjEtMiAxLTMuMXptOS01LjdxLTEuNCAyLjMtMS4yIDUtMC4yIDIuNyAxLjIgNC45YzEgMS40IDIuNiAyLjIgNC4zIDIuMSAxLjYgMCAzLjItMC43IDQuMi0yLjFsMS44IDEuOGMtMS41IDEuOC0zLjcgMi45LTYgMi44LTQuNiAwLTguMS0zLjItOC4xLTkuNSAwLTYuNCAzLjQtOS41IDguMS05LjVxMC44LTAuMSAxLjcgMC4xIDAuOCAwLjIgMS42IDAuNSAwLjggMC40IDEuNSAwLjkgMC42IDAuNSAxLjIgMS4ybC0xLjggMS44Yy0xLTEuNC0yLjYtMi4xLTQuMi0yLjEtMS43LTAuMS0zLjMgMC43LTQuMyAyLjF6bTIwLjcgMi40bDcuNyAxMS44aC0zLjNsLTYuMi0xMC4xLTMuMyAzLjR2Ni43aC0yLjd2LTI2LjdoMi43djE2LjRsOC40LTguMmgzLjN6bTIwLjgtNi44cTAuOCAwLjEgMS41IDAuNSAwLjggMC4zIDEuNSAwLjcgMC43IDAuNSAxLjIgMS4xYzEuOCAxLjkgMi4yIDQgMi4yIDcuNCAwIDMuNS0wLjQgNS43LTIuMiA3LjUtMS41IDEuNi0zLjcgMi41LTUuOSAyLjNxLTAuOCAwLTEuNi0wLjEtMC44LTAuMi0xLjUtMC41LTAuOC0wLjMtMS41LTAuNy0wLjctMC41LTEuMy0xYy0xLjctMS44LTIuMi00LTIuMi03LjUgMC0zLjMgMC41LTUuNiAyLjItNy40IDEuNS0xLjcgMy43LTIuNCA1LjktMi40cTAuOCAwIDEuNyAwLjF6bTEuNyA5LjdjMC0xLjktMC4xLTMuNy0xLTQuNy0xLjMtMS4xLTMuMi0xLjEtNC40IDAtMSAxLTEuMSAyLjgtMS4xIDQuNyAwIDIgMC4xIDMuOCAxLjEgNC43IDEuMiAxLjEgMy4xIDEuMSA0LjQgMCAwLjktMC45IDEtMi42IDEtNC43em0yMi42LTkuNmwtNi45IDE5LjNoLTMuN2wtNy4yLTE5LjNoNS4xbDMuOCAxMS44IDMuOS0xMS44em04LTAuMmM1LjQgMCA4LjQgMy45IDguMyA5LjF2Mi4yaC0xMS45djAuNnEwIDAuOCAwLjQgMS41IDAuNCAwLjcgMC45IDEuMiAwLjYgMC41IDEuNCAwLjggMC43IDAuMyAxLjUgMC4yYzEuNiAwLjIgMy4zLTAuNSA0LjQtMS42bDIuOSAyLjdjLTEuOCAyLjEtNC42IDMuMi03LjMgMy4xLTQuNSAwLTguOS0yLjEtOC45LTEwIDAtNi4yIDMuNC05LjYgOC4zLTkuNnptMy41IDhsLTAuNC0yLjFjLTAuNi0xLjItMS44LTEuOS0zLjItMS45LTEuNCAwLTIuNiAwLjctMy4xIDEuOWwtMC40IDIuMXptMTEuMi01LjljMS4yLTEuNCAzLTIgNC44LTJxMC42IDAgMS4yIDAuMSAwLjYgMC4xIDEuMiAwLjMgMC41IDAuMyAxIDAuNiAwLjUgMC40IDAuOSAwLjhsLTMuNSAzLjZjLTAuNi0wLjctMS41LTEuMS0yLjUtMS4xaC0wLjJjLTEuOCAwLjMtMi45IDEuOC0yLjkgMy42djExLjZoLTQuOHYtMTkuM2g0LjZ2MS44em0xMC4zLTQuM3EwLTEuMSAwLjUtMi4xIDAuNC0wLjkgMS4yLTEuNyAwLjctMC43IDEuNy0xLjEgMS0wLjQgMi4xLTAuNGgyLjd2NC4yaC0yYy0xIDAuMS0xLjQgMC45LTEuNCAxLjh2MmgzLjZ2My44aC0zLjZ2MTUuMWgtNC44em0yOS40IDIuM3EwLjggMC4xIDEuNiAwLjQgMC44IDAuMyAxLjQgMC44IDAuNyAwLjUgMS4zIDEuMWMxLjggMS45IDIuMiA0IDIuMiA3LjQgMCAzLjUtMC40IDUuNy0yLjIgNy41LTEuNSAxLjYtMy43IDIuNC01LjkgMi4zcS0wLjggMC0xLjYtMC4xLTAuOC0wLjItMS42LTAuNS0wLjctMC4zLTEuNC0wLjctMC43LTAuNS0xLjMtMWMtMS44LTEuOC0yLjItNC0yLjItNy41IDAtMy4zIDAuNC01LjYgMi4yLTcuNCAxLjUtMS43IDMuNy0yLjQgNS45LTIuNHEwLjggMCAxLjYgMC4xem0xLjggOS43YzAtMS45LTAuMS0zLjctMS4xLTQuNy0xLjItMS4xLTMuMS0xLjEtNC40IDAtMC45IDEtMS4xIDIuOC0xLjEgNC43IDAgMS45IDAuMiAzLjcgMS4xIDQuNyAxLjMgMS4xIDMuMiAxLjEgNC40IDAgMS0xIDEuMS0yLjYgMS4xLTQuN3ptMjcuMy05LjVoNS4ybC01LjkgMTkuM2gtNC4xbC00LTEyLjEtNCAxMi4xaC0zLjlsLTUuOS0xOS4zaDVsMy4yIDExLjkgMy44LTEyaDMuNGw0IDExLjggMy4yLTExLjh6bS00Mi43IDEzLjljMC4yIDAuOCAwLjkgMS4yIDEuNyAxLjFoMS44djQuMWgtMy40cS0xIDAtMi0wLjUtMC45LTAuNC0xLjYtMS4yLTAuNy0wLjgtMS4xLTEuOC0wLjMtMC45LTAuMi0ydi0yMS4yaDQuOHptLTEzNy44LTExLjJoLTIuNnYxMC42YzAgMS44IDAuNyAyLjggMi41IDIuOGgxLjR2Mi4zaC0yYy0zLjEgMC00LjYtMi4yLTQuNi00Ljl2LTE5LjJoMi43djYuMWg1LjF6Ii8+Cgk8cGF0aCBmaWxsPSIjYmNiYmJiIiBkPSJtMzUuNiA0NS41di0xMi40aDUuNXYxNy45aC00MS4xdi0xNy45aDUuNXYxMi40eiIvPgoJPHBhdGggZmlsbD0iI2Y0ODAyNCIgZD0ibTMxLjUgMzUuOGwxLjEtNC4xLTIyLjEtNC41LTAuOSA0LjV6bS0xOC45LTE0LjlsMjAuNSA5LjcgMS45LTQuMi0yMC41LTkuNnptNS44LTEwLjJsMTcuMiAxNC42IDIuOS0zLjUtMTcuNC0xNC42LTIuOSAzLjV6bTExLjEtMTAuOGwtMy43IDIuOCAxMy42IDE4LjMgMy43LTIuN3ptLTE5LjkgMzcuMmgyMS45djQuMWgtMjEuOXoiLz4KPC9zdmc+">
</div>© 2022 - 2024 — McMap. All rights reserved.
background-colorCSS property. You can create non-transparent part that will be fixed, and transparent part of image which will be filled by any color you like via CSS. Is that what you want to achieve? – Grommet