#1 Using Filter effect

Pros Cons Browser Support
  • Easy to apply
  • Not predictable - hard to get the color you want
  • Color manipulation is not good
  • Doesn't work well with white color
 Widely supported on modern broswers, may have issue with older IE

#2 Using Parent's Background Color

Pros Cons Browser Support
  • Easy to apply
  • Well supported
  • Looks more faded
  • Color manipulation is not that great
 Widely supported, even older broswers

#3 Using as Parent's Background Image and Background Color Blend

Pros Cons Browser Support
  • Best color output
  • Wide range of color manipulation
  • Easy to get the color you want
  • Height/width has to be set so extra responsive work
  • Background image has to be set in CSS
 Widely supported on modern broswers, may have issue with older IE & Edge

#4 Same as above but with responsive trick - gets image height/width automatically