js-background-blend-mode

A JavaScript based polyfill for browsers that don’t support CSS background-blend-mode property.

Browser Support:

• CSS background-blend-mode: many browsers but IE11- and some mobile Can I Use....
• Canvas blend modes: any browser but IE11- Can I Use....

Demo:

Codepen

Usage

1. Add the js-background-blend-mode.js file to your HTML

2. Define an element using data-blend attribute and one of those values:

   normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity

3. Add an image to blend using the data-blend-image attribute.

4. Add a color to blend using data-blend-color attribute.

5. Add a little CSS for fallback if the browser support CSS background-blend-mode (js-background-blend-mode.css file).

Example:

<div class="blend" data-blend="overlay" data-blend-image="demo.jpg" data-blend-color="rgba(255, 0, 0, 0.5)"></div>

TODO

• Polish code
• Check for better crossbrowser support
• Better performance (it is still slow to render)
• Gruntify
• Get rid of CSS file
• Bowerify
• NPM module

Credit

• Forked from: https://github.com/idevsoftware/
• Adobe Blend Modes and Compositing: http://html.adobe.com/webplatform/

License

Original License: ABRSL.

Forked License: MIT