A JavaScript based polyfill for browsers that don’t support CSS background-blend-mode
property.
- CSS background-blend-mode: many browsers but IE11- and some mobile Can I Use....
- Canvas blend modes: any browser but IE11- Can I Use....
-
Add the
js-background-blend-mode.js
file to your HTML -
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
-
Add an image to blend using the
data-blend-image
attribute. -
Add a color to blend using
data-blend-color
attribute. -
Add a little CSS for fallback if the browser support CSS
background-blend-mode
(js-background-blend-mode.css file).
<div class="blend" data-blend="overlay" data-blend-image="demo.jpg" data-blend-color="rgba(255, 0, 0, 0.5)"></div>
- Polish code
- Check for better crossbrowser support
- Better performance (it is still slow to render)
Gruntify- Get rid of CSS file
BowerifyNPM module
- Forked from: https://github.com/idevsoftware/
- Adobe Blend Modes and Compositing: http://html.adobe.com/webplatform/
Original License: ABRSL.
Forked License: MIT