CSS スキル: 画像にマスクを追加する方法 (共有)

前回の記事「CSS構文とは？」使い方とルールを詳しく紹介>>CSS構文の使い方とルールを紹介します。次の記事では、CSS を使用して画像にマスク効果を追加するためのヒントをいくつか紹介します。このヒントは非常に実用的で、Web サイトのレイアウトのパターンを打ち破るのに役立ちます。必要なコードは数行だけです。ぜひ見てください。

マスクの追加

マスクは、どのアセット要素を表示するかをブラウザーに指示します。これは、クリエイティブな形状やレイアウトを構築するのに役立ちます。マスキングは、ラスター画像 (透明部分のある PNG 形式など)、CSS グラデーション、または SVG 要素を使用する 3 つの方法で実行できます。

一般的なラスター イメージとは異なり、SVG は品質を大幅に損なうことなく拡大縮小または変換できることに注意してください。

添付コード:

img {
  mask-image: url(‘mask.png’) linear-gradient(-45deg,
                        rgba(0,0,0,1) 20%, rgba(0,0,0,0) 50%);
  mask-image: url(#masking); /*referencing to the element generated and defined in SVG code*/
}

Firefox は最新バージョンのみをサポートしているため、インライン SVG マスク要素を使用する必要があることに注意してください。透明度レベルのあるラスター イメージを使用するとどうなるでしょうか?画像の透明な部分は表示されません。つまり、不透明なセグメントが表示され、他の部分が隠れます。 マスキングは、同じプロパティを背景画像に適用して、その位置、サイズ、繰り返しを定義できるため、特に強力です。

前処理:

後処理:

透明度レベルは次の目的で使用できます。カットパーツ アニメーション画像 (GIF ファイルなど)、これらの属性を使用する場合は、クロスブラウザーのサポートを忘れずにベンダー プレフィックスを追加してください。

推奨学習: CSS ビデオ チュートリアル

以上がCSS スキル: 画像にマスクを追加する方法 (共有)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。