Home Background color over transparent PNG image in CSS
Reply: 4

Background color over transparent PNG image in CSS

Wyvh
1#
Wyvh Published in 2017-09-14 10:08:58Z

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.

andreas
2#
andreas Reply to 2017-09-14 10:44:11Z

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.

Hash
3#
Hash Reply to 2017-09-14 11:01:00Z

Use CSS Filters

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

From w3,

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

Heshan Kit
4#
Heshan Kit Reply to 2017-09-14 10:22:55Z

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?

Jasur Kurbanov
5#
Jasur Kurbanov Reply to 2017-09-14 10:41:12Z

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. Have look to these websites:

https://www.w3schools.com/cssref/css3_pr_filter.asp

https://css-tricks.com/almanac/properties/f/filter/

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.525461 second(s) , Gzip On .

© 2016 Powered by cudou.com design MATCHINFO