Background color over transparent PNG image in CSS

K

4

5

Is it actually possible to apply a background-color over a transparent PNG image in CSS ? Here's an example:

With CSS, turning this image

into this with a CSS code like background-color: rgba(0,0,300,.5)

All in full CSS (and HTML of course) ?

Thanks.

Ketch answered 14/9, 2017 at 10:8 Comment(7)

No , it is not possible to change colors like that. Do you want image to get changed on hover or what. – Palestrina 14/9, 2017 at 10:14

@AnmolSandal it is indeed possible with CSS filters. – Derive 14/9, 2017 at 10:27

Yes i have searched for it and got a solution. Thumbs up to your question , learned a new stuff – Palestrina 14/9, 2017 at 10:29

Not my question, but thanks anyway ;) – Derive 14/9, 2017 at 10:30

Any success in changing color? i am not getting the perfect match for it – Palestrina 14/9, 2017 at 10:33

the question is lacking what he has tried – Topliffe 14/9, 2017 at 10:37

I didn't try anything in CSS, as I didn't know any way to do it. :) – Ketch 14/9, 2017 at 10:39

D

2

You cannot achieve this effect using background-color, since a transparent background color applied to an overlying element will always effect the transparent parts of the PNG image too.

You need the CSS filters hue-rotate() (rotate the image color to violet) and brightness() (make the image darker):

img {
  filter: hue-rotate(230deg) brightness(60%);
}

<img src="https://i.sstatic.net/nPnsV.png" />

See MDN for more information about CSS filters. There is also a useful article on CSS Tricks for CSS filters.

Derive answered 14/9, 2017 at 10:24 Comment(5)

Thanks. So, there's no real way to put a low-transparency color hover an image instead of changing the image's color (with hue-rotate) fully into another color (just as if you were using background-color: rgba(0,300,0,.15) ? – Ketch 14/9, 2017 at 10:37

You can do that, but even if you apply this effect to an overlying element, you will always effect the transparent parts of the image too... – Derive 14/9, 2017 at 10:39

Oh well, that's sad. I thought of image mapping, but you can't apply a background-color on it either. :/ Marking it as the best answer. – Ketch 14/9, 2017 at 10:41

are u looking to have a hover effect? – Topliffe 14/9, 2017 at 10:42

Not really, i'm looking for a way to apply a small green color over a transparent image without applying it on the transparent parts of it, like andreas said. No hover effect here. – Ketch 14/9, 2017 at 10:44

T

4

Use CSS Filters

From an article about filters by Chris Coyier:

CSS Filters are a powerful tool that authors can use to achieve varying visual effects (sort of like Photoshop filters for the browser). The CSS filter property provides access to effects like blur or color shifting on an element’s rendering before the element is displayed.

blur()

brightness()

contrast()

drop-shadow()

grayscale()

hue-rotate()

invert()

opacity()

saturate()

sepia()

Filter samples (based on W3S):

<!DOCTYPE html>
<html>
<head>
<style>
img {
    width: 33%;
    height: auto;
    float: left; 
}

.blur {-webkit-filter: blur(4px);filter: blur(4px);}
.brightness {-webkit-filter: brightness(0.30);filter: brightness(0.30);}
.contrast {-webkit-filter: contrast(180%);filter: contrast(180%);}
.grayscale {-webkit-filter: grayscale(100%);filter: grayscale(100%);}
.huerotate {-webkit-filter: hue-rotate(180deg);filter: hue-rotate(180deg);}
.invert {-webkit-filter: invert(100%);filter: invert(100%);}
.opacity {-webkit-filter: opacity(50%);filter: opacity(50%);}
.saturate {-webkit-filter: saturate(7); filter: saturate(7);}
.sepia {-webkit-filter: sepia(100%);filter: sepia(100%);}
.shadow {-webkit-filter: drop-shadow(8px 8px 10px green);filter: drop-shadow(8px 8px 10px green);}
</style>
</head>
<body>

<p><strong>Note:</strong> The filter property is not supported in Internet Explorer, Edge 12, or Safari 5.1 and earlier.</p>

<img src="https://i.sstatic.net/nPnsV.png"  width="300" height="300">
<img class="blur" src="https://i.sstatic.net/nPnsV.png"  width="300" height="300">
<img class="brightness" src="https://i.sstatic.net/nPnsV.png"  width="300" height="300">
<img class="contrast" src="https://i.sstatic.net/nPnsV.png"  width="300" height="300">
<img class="grayscale" src="https://i.sstatic.net/nPnsV.png"  width="300" height="300">
<img class="huerotate" src="https://i.sstatic.net/nPnsV.png"  width="300" height="300">
<img class="invert" src="https://i.sstatic.net/nPnsV.png"  width="300" height="300">
<img class="opacity" src="https://i.sstatic.net/nPnsV.png"  width="300" height="300">
<img class="saturate" src="https://i.sstatic.net/nPnsV.png"  width="300" height="300">
<img class="sepia" src="https://i.sstatic.net/nPnsV.png"  width="300" height="300">
<img class="shadow" src="https://i.sstatic.net/nPnsV.png"  width="300" height="300">

</body>
</html>

On Hover effect:

img:hover {
  filter: hue-rotate(250deg);
}

<img src="https://i.sstatic.net/nPnsV.png" />

Topliffe answered 14/9, 2017 at 10:22 Comment(0)

D

2

You cannot achieve this effect using background-color, since a transparent background color applied to an overlying element will always effect the transparent parts of the PNG image too.

You need the CSS filters hue-rotate() (rotate the image color to violet) and brightness() (make the image darker):

img {
  filter: hue-rotate(230deg) brightness(60%);
}

<img src="https://i.sstatic.net/nPnsV.png" />

See MDN for more information about CSS filters. There is also a useful article on CSS Tricks for CSS filters.

Derive answered 14/9, 2017 at 10:24 Comment(5)

Thanks. So, there's no real way to put a low-transparency color hover an image instead of changing the image's color (with hue-rotate) fully into another color (just as if you were using background-color: rgba(0,300,0,.15) ? – Ketch 14/9, 2017 at 10:37

You can do that, but even if you apply this effect to an overlying element, you will always effect the transparent parts of the image too... – Derive 14/9, 2017 at 10:39

Oh well, that's sad. I thought of image mapping, but you can't apply a background-color on it either. :/ Marking it as the best answer. – Ketch 14/9, 2017 at 10:41

are u looking to have a hover effect? – Topliffe 14/9, 2017 at 10:42

Not really, i'm looking for a way to apply a small green color over a transparent image without applying it on the transparent parts of it, like andreas said. No hover effect here. – Ketch 14/9, 2017 at 10:44

H

2

Yes you can do it with a help of CSS filters.

"The CSS filter property provides access to effects like blur or color shifting on an element's rendering before the element is displayed. Filters are commonly used to adjust the rendering of an image, a background, or a border." – Chris Coyier

Have look at these websites:

CSS filter Property
Filters

Hahnert answered 14/9, 2017 at 10:41 Comment(0)

B

-1

You can't change color of the image from CSS as you wish. But you can do it to some extend using filters.

.saturate {-webkit-filter: saturate(3); filter: saturate(3);}
.grayscale {-webkit-filter: grayscale(100%); filter: grayscale(100%);}
.contrast {-webkit-filter: contrast(160%); filter: contrast(160%);}
.brightness {-webkit-filter: brightness(0.25); filter: brightness(0.25);}
.blur {-webkit-filter: blur(3px); filter: blur(3px);}
.invert {-webkit-filter: invert(100%); filter: invert(100%);}
.sepia {-webkit-filter: sepia(100%); filter: sepia(100%);}
.huerotate {-webkit-filter: hue-rotate(180deg); filter: hue-rotate(180deg);}
.rss.opacity {-webkit-filter: opacity(50%); filter: opacity(50%);}

DEMO

Please check this stackoverflow answers. Change color of PNG image via CSS?

Bilk answered 14/9, 2017 at 10:22 Comment(5)

Dont use the copied answer @heshan from #7416372 – Palestrina 14/9, 2017 at 10:28

read his comment properly @AnmolSandal "Please check this stackoverflow answers. Change color of PNG image via CSS?" – Pagan 14/9, 2017 at 10:33

@AnmolSandal please check "Please check this stackoverflow answers. Change color of PNG image via CSS?". you can see the reference. So please check full comment before you comment. – Bilk 14/9, 2017 at 10:34

Yes i mean that link can also be provided in content section to help user if we don't have our answers. I think this is what comment box is for. @HeshanKit don't think that i am arrogant. I did the same mistake before this is what i am talking about. Don't copy answer , please mention in a comment. I don't think it's an issue to be raised about. – Palestrina 14/9, 2017 at 11:47

@AnmolSandal then its better to explain that mistake first place in first comment rather than pointing same reference I mentioned. Anyway I will add references as comments next time. Thanks – Bilk 14/9, 2017 at 15:50

Recommended topics

Hot tags