I want such background blending effect like in screenshot attached.
I have already used rgba backgrounds but that does not looks like my designs.
Here is the image and code I used.
I tried using different background image and css3 elements but its not working properly.
Is this possible to this using any jquery?
.green_band {background: rgba(24, 95, 14, 0.5);}
2
Answers
I’m not sure there’s a way to use blending modes outside of Photoshop unless you want to write WebGL shaders.
No, at this time (summer 2014) you can only fake that using alpha transparency (e.g. using
rgba
).The CSS blend modes will come, but “it is an upcoming technology, and, at the time of this writing, browser support is patchy”.
See “Getting to know CSS Blend Modes” for an introduction and the browser support tables for
background-blend-mode
.Using the upcoming CSS blend-mode properties:
Here is the W3C Editor’s Draft: Compositing and Blending Level 1