- This topic is empty.
August 9, 2017 at 4:55 am #257506drone4fourParticipant
I’m trying to apply color and opacity filters to an image: https://codepen.io/Angeles4four/pen/zdwNwd
I got the opacity filter working, but not the color. I tried adding a green value to both a color property and background-color property in the CSS. But it’s not doing what I want. I feel like the solution I am asking for is going to be very trivial. Any help?
I Googled filter and colorize images css which turned up a helpful guide by CSS Tricks guest blog poster, Amelia Bellamy-Royds, titled “Color Filters Can Turn Your Gray Skies Blue”: https://css-tricks.com/color-filters-can-turn-your-gray-skies-blue/
I took a look at Amelia’s CodePens and can’t find the solution I am looking for.
What would you ppl recommend I could try next?August 9, 2017 at 5:33 am #257510BeverleyhParticipant
I took a look at Amelia’s CodePens and can’t find the solution I am looking for
I think you’ve overlooked the pens with the feColorMatrix https://codepen.io/AmeliaBR/pen/WvwwME
The matrix is a bit daunting (not something I plan on delving into myself) but you can use this handy online generator to work out the values https://codepen.io/jacobberglund/pen/ORNQAr
There’s also this generator, which is even easier http://blog.andresgalante.com/RGBAtoFeColorMatrix/
In both cases, just slide the bars until you achieve the effect you’re after.August 11, 2017 at 4:44 pm #259138
- The forum ‘CSS’ is closed to new topics and replies.