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

enter image description here

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

enter image description here

All in full CSS (and HTML of course) ?

Thanks.

andreas
  • 16,357
  • 12
  • 72
  • 76
Wyvh
  • 73
  • 2
  • 9

4 Answers4

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.stack.imgur.com/nPnsV.png"  width="300" height="300">
<img class="blur" src="https://i.stack.imgur.com/nPnsV.png"  width="300" height="300">
<img class="brightness" src="https://i.stack.imgur.com/nPnsV.png"  width="300" height="300">
<img class="contrast" src="https://i.stack.imgur.com/nPnsV.png"  width="300" height="300">
<img class="grayscale" src="https://i.stack.imgur.com/nPnsV.png"  width="300" height="300">
<img class="huerotate" src="https://i.stack.imgur.com/nPnsV.png"  width="300" height="300">
<img class="invert" src="https://i.stack.imgur.com/nPnsV.png"  width="300" height="300">
<img class="opacity" src="https://i.stack.imgur.com/nPnsV.png"  width="300" height="300">
<img class="saturate" src="https://i.stack.imgur.com/nPnsV.png"  width="300" height="300">
<img class="sepia" src="https://i.stack.imgur.com/nPnsV.png"  width="300" height="300">
<img class="shadow" src="https://i.stack.imgur.com/nPnsV.png"  width="300" height="300">

</body>
</html>


On Hover effect:

img:hover {
  filter: hue-rotate(250deg);
}
<img src="https://i.stack.imgur.com/nPnsV.png" />
mhpreiman
  • 139
  • 2
  • 4
  • 13
Hash
  • 7,726
  • 9
  • 34
  • 53
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.stack.imgur.com/nPnsV.png" />

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

andreas
  • 16,357
  • 12
  • 72
  • 76
  • 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)` ? – Wyvh Sep 14 '17 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... – andreas Sep 14 '17 at 10:39
  • 1
    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. – Wyvh Sep 14 '17 at 10:41
  • are u looking to have a hover effect? – Hash Sep 14 '17 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. – Wyvh Sep 14 '17 at 10:44
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

mhpreiman
  • 139
  • 2
  • 4
  • 13
Jasur Kurbanov
  • 96
  • 13
-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?

Heshan Kit
  • 113
  • 1
  • 3
  • 1
    Dont use the copied answer @heshan from https://stackoverflow.com/questions/7415872/change-color-of-png-image-via-css – Anmol Sandal Sep 14 '17 at 10:28
  • read his comment properly @AnmolSandal "Please check this stackoverflow answers. Change color of PNG image via CSS?" – lpradhap Sep 14 '17 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. – Heshan Kit Sep 14 '17 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. – Anmol Sandal Sep 14 '17 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 – Heshan Kit Sep 14 '17 at 15:50