[英]Blend mode:multiply in Internet Explorer
我需要在模式乘法中將圖像與紅色正方形混合在一起。 據我所知,IE和Safari不支持css-property“blend-mode”,所以我嘗試將它們在畫布中混合在一起,一切正常 - 除了在IE中。 有沒有辦法讓這些在IE中混合在一起或者不支持呢?
對於Internet Explorer,Canvas混合模式正在“考慮中”。
https://developer.microsoft.com/en-us/microsoft-edge/platform/status/mixblendmode/?q=blend
在IE中實現混合之前,您可以使用自己的乘法過濾器:
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);
}
此多重圖像過濾器也是跨瀏覽器兼容的。
在這里,我找到了一個完全css解決方案
https://teamtreehouse.com/community/fallback-for-css-blending-modes
這是:
<!--[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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.