CSSでマスク機能を実装

前の言葉

CSS マスクは、2008 年 4 月に Apple によって Webkit エンジンに追加されました。マスキングは、png24 ビットまたは png32 ビットのアルファ透明度チャネルの効果と同様に、ピクセル レベルで要素の透明度を制御する機能を提供します。この記事ではCSSマスクを詳しく紹介します

概要

画像は3つのRGBチャンネルと各ピクセルに定義された色で構成されています。しかし、その上には 4 番目のチャネルであるアルファ チャネルがあり、明るさによって各ピクセルの透明度を定義します。白は不透明、黒は透明、その間のグレーは半透明を意味します。著作権は作者に帰属します。

マスクの機能は、透明な絵やグラデーションを使って要素の背景をマスクすることです。したがって、マスク マスクは背景と非常によく似ていますが、色のサブプロパティがなく、背景の残りの 6 つのサブプロパティが

であることを除き、マスク マスクはマスク画像を含む複合プロパティです。 、mask-mode、mask-Repeat、mask-position、mask-clip、ma​​sk-origin、mask-size、mask-compositeは8つの属性です

【注意】IEブラウザはWebkitベースのブラウザ（Chrome、safariを含む）をサポートしていません、IOS、android ）には、-webkit- プレフィックスを追加する必要があります。 Firefox ブラウザーは webkit-mask 属性もサポートしていることに注意することが重要です

【mask-image】

デフォルト値は none、値は透明な画像、または透明なグラデーションです

【mask-repeat】

デフォルト値はrepeat、オプションの値はbackground-repeatと同じ、詳細はこちら

【mask-position】

デフォルト値は0 0、オプションの値はbackground-positionと同じ、詳細はこちら

【mask-clip】

デフォルト値はborder-box、オプション値はbackground-clipと同じ、詳細はこちら

【mask-origin】

デフォルト値はborder-box、オプションの値はbackground-origin、詳細と同じです ここに状況が移ります

【mask-size】

デフォルト値はauto、オプションの値はbackground-size、詳細と同じですここに移動

【mask-mode】

デフォルト値はmatch-source、オプションです 値はalpha、luminance、match-source、またはそれらの組み合わせです

【mask-composite】

デフォルト値はadd、theオプションの値は add、subtract、intersect、exclude です

[注意] Firefox のみがマスクモードとマスク合成をサポートしています

インスタンス

nbsp;html><meta><title>Document</title><style>.wrap{position:absolute;width: 400px;border:1px solid black;}#mask{height: 300px;background:url() lightblue;-webkit-mask:  url() no-repeat;animation: 2s maskPosition infinite alternate ;}#mask:hover{animation: none;}@keyframes maskPosition{0%{-webkit-mask-position:0 0;}100%{-webkit-mask-position:100% 100%;}}</style><p></p><p></p>    <script>var oBox = document.getElementById(&#39;mask&#39;);
oBox.onmousemove = function(e){
    e = e || event;
    oBox.style.WebkitMaskPosition=(e.clientX-50)+"px "+ (e.clientY-50)+"px";
}    
</script>

以上がCSSでマスク機能を実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。