CSSでマスク機能を実装-htmlチュートリアル-php.cn

CSSでマスク機能を実装

巴扎黑

リリース： 2018-05-17 14:29:34

オリジナル

5357 人が閲覧しました

前の言葉

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

概要

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

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

であることを除き、マスクマスクはマスク画像を含む複合プロパティです。、mask-mode、mask-Repeat、mask-position、mask-clip、mask-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 のみがマスクモードとマスク合成をサポートしています

インスタンス

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><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></head><body><p class="wrap"><p id="mask"></p>    </p><script>var oBox = document.getElementById('mask');
oBox.onmousemove = function(e){
    e = e || event;
    oBox.style.WebkitMaskPosition=(e.clientX-50)+"px "+ (e.clientY-50)+"px";
}    
</script></body></html>

ログイン後にコピー

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