ホームページ >ウェブフロントエンド >htmlチュートリアル >CSSでマスク機能を実装
CSSでマスク機能を実装
- 巴扎黑オリジナル
- 2018-05-17 14:29:345382ブラウズ
前の言葉
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 サイトの他の関連記事を参照してください。