CSS Blend Mode : Multiply

  • Author
    Posts
  • #1793168

    robeastblog
    Member

    HI:

    I’ve been looking for a way to blend images with backgrounds the way one would blend two images using multiply in photoshop.

    Would something like this work here?

    img.multiply { -webkit-blend-mode: multiply; }

    The blog I need help with is rbst.wordpress.com.

    #1793250

    hafizr
    Staff

    Hi there,

    Instead of -webkit-blend-mode it looks like you should use mix-blend-mode instead.

    Resources:
    http://css-tricks.com/basics-css-blend-modes/
    https://medium.com/web-design-technique/6b51bf53743a

    Technically it should work if you add it to the Custom CSS in your WordPress.com site, but only browsers that support it will show the effect. For now only the latest versions of Chrome and Firefox do: http://caniuse.com/#feat=css-backgroundblendmode

    #1793258

    robeastblog
    Member

    Thanks, hafizr.

    I’ll check those out. Probably wait until it’s fully integrated to use the blend. I tried to use an alpha channel adjustment, but it’s not quite the same effect…

The topic ‘CSS Blend Mode : Multiply’ is closed to new replies.