背景色で乗算 ie edge対応方法

Question

css3で背景色が乗算など可能になりましたがie、edge等が非対応のため対応するポリフィルなどないでしょうか？

Comments

[yambejp]

ie edgeで動くサンプルを提示ください

Answer 1

calc()

https://developer.mozilla.org/ja/docs/Web/CSS/calc

Re: teta さん

Comments

[kei344]

「ブレンドモード（描画モード）のmultiply（乗算）」のことなのでcalc()のみでは計算できないのでは。

【CSSブレンドモードで画像を彩ろう | Webクリエイターボックス】
https://www.webcreatorbox.com/tech/css-blend-mode

[think49]

なるほど。
「css3で背景色が乗算など可能」は「カラーコードを四則演算可能」と解釈していました。
-2投じられたところを見るに、同じ解釈をした人はいないようですね。

Answer 2

think49さんの投稿を見て試してみたら，colorでcalc()使えたので，簡易的なものならcalc()でも出来るかもしれないですね（っていうか，こんな使い方初めて知った）

<p class="a">aaa</p>
<p class="b">aaa</p>
<p class="c">aaa</p>

p{
  background: skyblue;
  padding: 1em;
  font-size: 2em;
}

.a{
  color: rgb(255, 99, calc(10 * 20) );
}
.b{
  color: rgb(255, 99, calc(10 * 10) );
}
.c{
  color: rgb(255, 99, calc(10 * 1) );
}

Comments

[think49]

私の回答の意図は仰る通りで、「color値 * color値」なら可能と考えました(custom propertiesを併用するには、IE11を切り捨てる必要有)。
「背景画像 * 背景色」は無理ですが、「背景色が乗算」とあったので、そちらは考慮していませんでした。

Answer 3

どういうことをしたいのかわかりませんが、Edge のみであれば canvas 要素を使ってできるかもしれません。
https://caniuse.com/#feat=canvas-blending

-- 追記
サンプルを追加しました。ついでにIE11でも表示できるよう計算してます。
(上からCSS、globalCompositeOperation、計算)
https://jsfiddle.net/1wzku7e0/1

Answer 4

使えるかどうか試してないので知りませんが、どうぞ。
idevsoftware/js-background-blend-mode