CSSを使用して画像にマスクを追加する
要素の上にレイヤーを配置して、部分的または完全に非表示にすることができます。 Mask-image 属性は、要素上のレイヤーを指定するために使用される CSS 属性です。画像にすることもできますが、画像にマスクを追加するには画像のアドレスを使用する必要があります。
この記事では、CSS プロパティを使用して画像にマスクを追加する方法と、同じプロパティでさらに何ができるかを見ていきます。
画像にマスクを追加します
mask-image 属性は、目的の画像またはテキストにマスクを追加するために使用する属性です。このプロパティは、画像を部分的または完全に非表示にするレイヤーを追加します。このプロパティをより深く理解するために、プロパティの構文を簡単に見てみましょう。
###文法### リーリーmask-image プロパティには別の値を使用します。
none 値はマスク レイヤを追加しませんが、画像またはテキストの上に透明な黒いレイヤを設定します。 値は線形グラデーション マスクを追加できます。
この例では、
ここでは、コンテナ クラスが作成され、次に CSS 部分に進みます。この部分では、最初に高さと幅を変更し、次に印刷する画像とともにマスク属性を使用します。コードから得られる出力を見てみましょう。
リーリーこれがこれから取得する出力です。mask-image 属性を使用した後にイメージがマスクされたことがわかります。
新しいプロパティ値を別の例で使用するので、次の例に進みましょう。
###例###この例では、mask-image 属性を使用し、その値を線形グラデーションに設定します。次に、この属性がどのように機能するかを理解するためにコードに移りましょう。
リーリー上記のコードでは、最初にコンテナを作成し、次に CSS セクションでその高さと幅を変更します。その後、マスクを適用する画像を追加し、mask-image プロパティを使用してその値を線形グラデーションに設定しました。黒を 81%、透明を 20% に設定します。上記のコードを簡単に見てみましょう。
上の例では、画像が下から透明になっていることがわかります。これは、画像にマスクが適用されていることを意味します。
注- 線形グラデーションの黒の値を 100% に設定すると、画像はユーザーに完全に表示されます。透明度を 100% に設定すると、画像は次のようになります。 obscured フードが完全に隠れます。
###例###以下の例では、プロパティの値を放射状のグラデーションに変更します。これは、マスクが円形で追加されることを意味します。コードの他のコンポーネントは同様です。以下のコードを使用して得られる出力を見てみましょう。
リーリー上記の手順を実行すると、画像の一部が透明になり、他の部分が暗くなるため、マスクが円形に表示されることがわかります。 -webkit プレフィックスを使用するのはなぜですか?
-webkit 接頭辞を使用するのは、ほとんどのブラウザーが現在使用しているマスキング機能を部分的にしかサポートしていないためです。すべてのブラウザとの互換性を確保するために、-webkit プレフィックスと標準属性の両方を使用します。
###結論は###CSS のマスクは、プロパティで使用される値に応じて、プロパティを部分的または完全に非表示にすることができます。マスクは、マスク クリップ、マスク イメージ、マスク モード、マスク原点などのように使用できます。マスキング プロパティを使用すると、画像またはテキストにマスクを設定でき、適用するマスクの形状を変更することもできます。マスクは、ユーザーの没入感を高めたり、画像の特定の部分を隠したりするために画像に適用されます。
以上がCSSを使用して画像にマスクを追加するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











このチュートリアルでは、Smart Formsフレームワークを使用して、プロフェッショナルなJavaScriptフォームの作成を示しています(注:使用できなくなりました)。 フレームワーク自体は利用できませんが、原則とテクニックは他のフォームビルダーに関連しています。

CSS Box-Shadowおよびアウトラインプロパティは、WordPress 6.1でTheme.jsonサポートを獲得しました。実際のテーマでどのように機能するか、そしてこれらのスタイルをWordPressブロックと要素に適用するために必要なオプションのいくつかの例を見てみましょう。

これは、フォームアクセシビリティについて行った小さなシリーズの3番目の投稿です。 2番目の投稿を逃した場合は、「ユーザーフォーカスの管理:Focus-Visible」をご覧ください。で

インラインテキストエディターの構築は些細なものではありません。 このプロセスは、ターゲット要素を編集可能にすることから始まり、その過程で潜在的なSyntaxerrorの例外を処理します。 エディターの作成 このエディターを構築するには、コンテンツを動的に変更する必要があります

Svelte Transition APIは、コンポーネントがカスタムSVELTE遷移を含むドキュメントを入力または離れるときにアニメーション化する方法を提供します。

最近GraphQLの作業を開始した場合、またはその長所と短所をレビューした場合、「GraphQLがキャッシュをサポートしていない」または

この記事では、Envato Marketで入手可能なPHPフォームのビルダースクリプトを説明し、機能、柔軟性、デザインを比較します。 特定のオプションに飛び込む前に、PHPフォームのビルダーが何であるか、そしてそれを使用する理由を理解しましょう。 PHPフォーム

このチュートリアルは、node.js、Express、およびMulterを使用してファイルアップロードシステムを構築することをガイドします。 単一および複数のファイルのアップロードをカバーし、後で検索するためにMongoDBデータベースに画像を保存することさえ示します。 まず、プロジェックをセットアップします
