CSSを使用して画像にマスクを追加する

要素の上にレイヤーを配置して、部分的または完全に非表示にすることができます。 Mask-image 属性は、要素上のレイヤーを指定するために使用される CSS 属性です。画像にすることもできますが、画像にマスクを追加するには画像のアドレスを使用する必要があります。

この記事では、CSS プロパティを使用して画像にマスクを追加する方法と、同じプロパティでさらに何ができるかを見ていきます。

画像にマスクを追加します

mask-image 属性は、目的の画像またはテキストにマスクを追加するために使用する属性です。このプロパティは、画像を部分的または完全に非表示にするレイヤーを追加します。このプロパティをより深く理解するために、プロパティの構文を簡単に見てみましょう。

＃＃＃文法＃＃＃ リーリー

mask-image プロパティには別の値を使用します。

none

値はマスク レイヤを追加しませんが、画像またはテキストの上に透明な黒いレイヤを設定します。 値は線形グラデーション マスクを追加できます。 初期の 値は属性値をデフォルト値に設定し、継承された値は この属性を使用する要素の最も近い親のマスク属性を 継承します。 このプロパティをよりよく理解するために、例を使用して、mask-image プロパティの値がどのように機能するかを詳しく学びます。

＃＃＃例＃＃＃

この例では、 の値を使用し、画像のアドレスを追加して、画像にマスクを追加できるようにします。

ここでは、コンテナ クラスが作成され、次に CSS 部分に進みます。この部分では、最初に高さと幅を変更し、次に印刷する画像とともにマスク属性を使用します。コードから得られる出力を見てみましょう。

リーリー

これがこれから取得する出力です。mask-image 属性を使用した後にイメージがマスクされたことがわかります。

新しいプロパティ値を別の例で使用するので、次の例に進みましょう。

＃＃＃例＃＃＃

この例では、mask-image 属性を使用し、その値を線形グラデーションに設定します。次に、この属性がどのように機能するかを理解するためにコードに移りましょう。

リーリー

上記のコードでは、最初にコンテナを作成し、次に CSS セクションでその高さと幅を変更します。その後、マスクを適用する画像を追加し、mask-image プロパティを使用してその値を線形グラデーションに設定しました。黒を 81%、透明を 20% に設定します。上記のコードを簡単に見てみましょう。

上の例では、画像が下から透明になっていることがわかります。これは、画像にマスクが適用されていることを意味します。

注

- 線形グラデーションの黒の値を 100% に設定すると、画像はユーザーに完全に表示されます。透明度を 100% に設定すると、画像は次のようになります。 obscured フードが完全に隠れます。

＃＃＃例＃＃＃

以下の例では、プロパティの値を放射状のグラデーションに変更します。これは、マスクが円形で追加されることを意味します。コードの他のコンポーネントは同様です。以下のコードを使用して得られる出力を見てみましょう。

リーリー

上記の手順を実行すると、画像の一部が透明になり、他の部分が暗くなるため、マスクが円形に表示されることがわかります。 -webkit プレフィックスを使用するのはなぜですか?

-webkit 接頭辞を使用するのは、ほとんどのブラウザーが現在使用しているマスキング機能を部分的にしかサポートしていないためです。すべてのブラウザとの互換性を確保するために、-webkit プレフィックスと標準属性の両方を使用します。

＃＃＃結論は＃＃＃

CSS のマスクは、プロパティで使用される値に応じて、プロパティを部分的または完全に非表示にすることができます。マスクは、マスク クリップ、マスク イメージ、マスク モード、マスク原点などのように使用できます。マスキング プロパティを使用すると、画像またはテキストにマスクを設定でき、適用するマスクの形状を変更することもできます。マスクは、ユーザーの没入感を高めたり、画像の特定の部分を隠したりするために画像に適用されます。

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