All geek questions in one place

Blend Mode: Multiply in Internet Explorer

I need the image to mix with the red square in multiplication mode. As I know, IE and Safari do not support the "blend-mode" css property, so I tried this by mixing them together on the canvas and everything worked fine - except for IE. Is there a way to get those combined in IE, or not yet supported?

+6
source share
2 answers

For Internet Explorer, Canvas blending modes are pending.

https://developer.microsoft.com/en-us/microsoft-edge/platform/status/mixblendmode/?q=blend

Until the mixes are implemented in IE, you can use the multiplication filter "in your own way":

function multiply(R, G, B) { var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height); var data = imgData.data; for (var i = 0; i < data.length; i += 4) { data[i ] = R * data[i ] / 255; data[i + 1] = G * data[i + 1] / 255; data[i + 2] = B * data[i + 2] / 255; } ctx.putImageData(imgData, 0, 0); }

And this multiple image filter is also compatible with different browsers.

+11
source

Here I found a fully css solution:

https://teamtreehouse.com/community/fallback-for-css-blending-modes

which the:

 <!--[if IE]> <style> .yourTargetClass:before { content: ""; position: absolute; height: 100%; width: 100%; background: rgba(10, 36, 54, 0.9); /* THIS IS WHAT EVER OVERLAY COLOUR YOU WANT */ } </style>

+2
source

Source: https://habr.com/ru/post/973409/

More articles:


All Articles