CODEWITHSUNDEEP
javascriptjquerycss
Uzumaki Naruto
Uzumaki Naruto

Reputation: 753

Change colour gradient of div acording to the colour scheme of the image

WHAT I HAVE

I have background image with width and height equal to 100% at z-index:0. Now there is another div (#blanket) on top of that with equal height and width and has an opacity level of 0.7 to create a blur sort of effect of the image behind it ... The colour of the the div (#blanket) is set to white so the it looks like there is 70% percent white transparent sheet behind which is an image.

WHAT I WANT

Can I change or set the colour gradient of the div (#blanket) that matches the colours in the image behind it .. I first saw that in iphone the way they matched their homescreen theme according to the wallpaper. So if the wallpaper had a red and black sports car then the theme would mostly consist of two basic colours , the red and the black. Can I achieve this in my website. If So then how?

Upvotes: 0

Views: 39

Answers (1)

Dan Ovidiu Boncut
Dan Ovidiu Boncut

Reputation: 3165

I think that css filters will help you more in this case. You can choose one from this:

  • blur()
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • sepia()
  • url() - for applying SVG filters

Examples can be found here.

Upvotes: 1

Related Questions