skip to Main Content

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?

enter image description here

.green_band {background: rgba(24, 95, 14, 0.5);}

2

Answers


  1. I’m not sure there’s a way to use blending modes outside of Photoshop unless you want to write WebGL shaders.

    Login or Signup to reply.
  2. 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:

    background-color: rgb(24, 95, 14);
    background-blend-mode: multiply;
    

    Here is the W3C Editor’s Draft: Compositing and Blending Level 1

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search