CSSを使用した「デスティネーションアウト」のようなブレンド動作

Question

私にはイメージがあります。私はこの画像の2番目のグラフィカル要素ontopを持っています。そのアルファの下にある画像の一部を隠すために使用したいのですが、トップ要素自体は表示されません。

CanvasRenderingContext2D.globalCompositeOperation = "destination-out" 

このトップ要素の線に沿って

何かがそれほど選択肢ではありません別々のキャンバスに、すべてを事前レンダリングを、透明度を変更し、ライブ形作っていきます。

私は「乗算」を考えていましたが、期待したことはしませんでした。私はトップレイヤーのアルファベットを "0"にして、それを下のレイヤーと掛け合わせて透明にすると思った。 （私はそれがうまくいかなかったのは悲しいことです）

既存のCSSブレンドモード（または他の方法）を使用してこれを「ハックする」ことはありますか？代替案として

Answer 1

、mask-image（現在IE /エッジに、このためのサポートはありませんが、注）考えてみます。

img { 
 
    -webkit-mask-image: url(http://www.lordtennyson.ca/uploads/1/2/4/2/12421219/paw_print_small.png); 
 
    mask-image: url(http://www.lordtennyson.ca/uploads/1/2/4/2/12421219/paw_print_small.png); 
 
}

<img src="http://www.dizzydi.com/uploads/6/5/6/5/65656887/6168555.jpg" />