CSS を使用して画像オーバーレイを作成する方法

Web ページに複数の画像を表示する場合、追加情報やそれらの上にマウスを置いたときの機能。これを実現する 1 つの方法は、テキスト、アイコン、またはその他の要素を含むオーバーレイレイヤーを追加することです。この記事では、CSS を使用して画像オーバーレイを作成する方法について説明します。

CSS の実装

オーバーレイレイヤーを作成するには、次の CSS を利用できます。 :

<code class="css">.image-container {
  position: relative;
  width: 200px;
  height: 300px;
}

.image-container .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  color: #FFF;
}

.image-container:hover .overlay {
  display: block;
  background: rgba(0, 0, 0, .6);
}</code>

ログイン後にコピー

上記の CSS では、画像とそのオーバーレイを絶対的に配置するための画像コンテナクラスを定義しています。このコンテナ内では、オーバーレイクラスによってオーバーレイレイヤーの位置と可視性が定義されます。マウスを画像コンテナの上に置くと、表示プロパティがブロックに変わり、オーバーレイが表示されます。

HTML 構造

オーバーレイを HTML に組み込むには、次のコードを使用します:


  
  This is the overlay content.

カスタマイズ

提供されている CSS は基盤として機能しますが、デザインのニーズに合わせてオーバーレイをカスタマイズできます。たとえば、次のことができます。

背景プロパティを変更して、オーバーレイのカスタム背景色または画像を設定します。
色のプロパティを調整して、オーバーレイ内のテキストの色を変更します。 
ボタンやリンクなどの HTML 要素を追加して、オーバーレイの機能を強化します。

結論

画像の作成CSS を使用したオーバーレイは、画像にインタラクティブ性と情報を追加できる簡単なプロセスです。この記事で説明する基本原則を理解することで、オーバーレイを実装して Web サイトのユーザー エクスペリエンスを向上させることができます。
以上がCSS を使用して画像オーバーレイを作成するには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。