CODEWITHSUNDEEP
htmlcsspngbackground-color
Wyvh
Wyvh

Reputation: 73

Background color over transparent PNG image in CSS

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.

Upvotes: 5

Views: 5491

Answers (4)

Jasur Kurbanov
Jasur Kurbanov

Reputation: 96

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

Upvotes: 2

Hash
Hash

Reputation: 8030

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" />

Upvotes: 4

andreas
andreas

Reputation: 16946

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.

Upvotes: 2

Heshankit
Heshankit

Reputation: 113

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?

Upvotes: -1

Related Questions