画像マスクを効果-webkit-マスク - 弾幕をブロックしていない人々が実現する方法であります

この実験は、素子上の像マスク層を設定するための機能です。

A、値

none：あるデフォルト、透明な黒画像層、無マスク層。

<mask-source>：<mask>URL CSSまたは画像<image>マスク層としての画像

第二に、構文は次のとおりです。

.demo1 {
    背景：URL（ "画像/ logo.png"）ノー・リピート;
    -webkit-マスク：URL（ "画像/ mask.png"）;
}

第三に、レンダリング：

 透明度（アルファ）黒色部分をmask.pngは、表示画像の下の全領域、1であり、0（アルファ値）への透明性の残りながら、完全に画像領域の底部をカバーします。

 

第四には、テンセントのビデオがあいまいな文字の弾幕を達成する方法ではありません。

私たちは、爆弾の弾幕上で見てきた、今の下に示すように、弾幕弾幕文字をブロックすることではありません（Chromeブラウザ効果）、テンセントの映像使用は達成するために-webkit-maskプロパティです。

 

ネットワークパネルは常にいくつかのSVG得られた認識アルゴリズムを介してシールドの後端部であるマスク画像を、ロード分かる次のように、画像が返されます。

したがって、黒色部分の後に白い部分があってもよいときに表示することができない連発。

しかし、今の下に示すように、多くのブラウザは、ブラウザの端に同じビデオコンテンツの効果として、マスクをサポートしていませんがあります。

公式サイト：https://developer.mozilla.org/zh-CN/docs/Web/CSS/mask-image

参考：https://www.zhangxinxu.com/wordpress/2017/11/css-css3-mask-masks/