シルエット内に画像やビデオを配置するにはどうすればよいですか?

Web サイトによっては、画像や動画がシルエットで再生されているのを見たことがあるかもしれません。シルエットは画像、物体、人、動物であり、被写体の輪郭を黒で表されます。シルエットに画像やビデオを挿入すると、ビデオや画像がシルエットの色で表示されます。

この記事では、画像やビデオをシルエットに配置する方法を学びます。

アウトライン内にオブジェクトを配置するにはどうすればよいですか?

シルエットは、黒またはその他のパレット色の固体形状で表される物体または人物の画像です。ここで使用する属性は mix-blend 属性になります。これは、特定の要素のコンテンツを最も近い親要素とどのようにブレンドするかを指定します。

＃＃＃文法＃＃＃

以下は、mix-blend 属性を使用するための構文です -

リーリー

ブレンド ブレンド モードには、Normal、Multiply、Screen、Darken などの値があり、それぞれ最も近い親とのブレンド関係が変更されます。この混合プロパティをよりよく理解するために例を見てみましょう。

＃＃＃例＃＃＃

以下の例では、3 つのコンテナを作成し、それらに 3 つの異なるクラスを提供します。次に、CSS セクションで、幅、高さ、境界線の半径を変更して円にし、すべての円の色を変更しました。予想される出力コードは次のとおりです -

リーリー

ご覧のとおり、mix-blend プロパティを使用して、上の円を 2 つの異なる色でブレンドしています。

ブレンド モード属性がどのように機能するかがわかったので、シルエット内に画像またはビデオを配置し、そのために必要なリソースがあることを確認します。コードセクションを見て、シルエットに画像またはビデオを挿入する方法を見てみましょう。

＃＃＃例＃＃＃

この例では、ブレンド ブレンド モード プロパティを使用して、シルエット画像に画像を追加します。

ここでは、最初にシルエット画像を追加し、次にブレンドしたい画像を追加しました。次に、それらを div の下にラップし、クラスを与えます。その後、CSS セクションに移動し、追加した画像の mix-blend モード プロパティを使用して、値を screen に設定します。次のコードを使用して得られる出力を見てみましょう。

リーリー

上記の出力では、シルエット画像を追加してから別の画像を追加したことがわかります。ブレンド ブレンド モード プロパティを使用すると、画像がシルエットとブレンドされ、2 つの異なる画像ではなく同じ画像のように見えます。

注意

- テキスト、画像、SVG に混合ブレンド モード属性を使用できます。混合ブレンド モード属性をサポートするブラウザには、chrome、edge、safari、Firefox などが含まれます。

＃＃＃結論は＃＃＃

シルエット効果は、Web サイトをよりインタラクティブで魅力的なものにするために使用できます。これは、CSS の単一のプロパティである mix-blend プロパティを使用するだけで実現できます。このプロパティは、コンテンツが最も近い親および親レベルの背景とどのようにブレンドされるかを定義します。

この記事では、Blend ブレンド モード プロパティなどの CSS プロパティを使用して、画像またはビデオをシルエットに配置する方法について説明しました。

以上がシルエット内に画像やビデオを配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。