HTMLとCSSを使用して画像オーバーレイアイコンを作成する方法

＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃概要＃＃＃

画像オーバーレイは 2 つの画像またはアイコンのオーバーレイであり、最初の画像の上にカーソルを置くと、一方のアイコンまたは画像が画面に表示され、もう一方のアイコンが画面に表示されます。したがって、この機能を実装するには、HTML と CSS、およびトランジションとアニメーションのプロパティに関する基本的な知識が必要です。したがって、オーバーレイを作成するために、内部オーバーレイ アイコンを作成する例をいくつか見ていきます。 ＃＃＃アルゴリズム＃＃＃

ステップ 1

- テキスト エディターで HTML ファイルを作成し、ファイル内に HTML ボイラープレートを作成します。

ステップ 2

−

次に、画像 (そのうちの 1 つは静的画像) と別の画像アイコン (表示された画像の上にマウスを置きます) を含む div コンテナを作成します。起きているとき）。

ステップ 3 − src 属性を含む img タグを挿入します。 src 属性に画像リンクを追加します。 リーリー

ステップ 4 − ここで、フォント Awesome CDN リンクを HTML ドキュメントの head タグに挿入します。以下のCDNリンク。

リーリー

ステップ 5 − 次に、フォント Awesome ユーザー アイコン クラスを使用してオーバーレイ イメージを作成します。

リーリー

ステップ 6 - 次に、同じフォルダーに style.css ファイルを作成し、style.css ファイルを HTML ドキュメントにリンクします。

リーリー

ステップ 7 − HTML 要素のスタイルを設定し、画像の上にマウスを置いたときにオーバーレイが表示されるようにスタイルを設定します。

ステップ 8 − 画像オーバーレイが正常に作成されました。

＃＃＃例＃＃＃

この例では、画像とフォントの Awesome アイコンを使用して画像オーバーレイを作成しました。 font Awesome ユーザー アイコン クラスは、font Awesome ライブラリからインポートされます。これを構築するために、フォルダー内に 2 つのファイルを作成しました。1 つのファイルには関数のスケルトン部分が含まれるindex.html が含まれ、もう 1 つのファイルにはスタイルと関数 Work の主要部分が含まれる style.css が含まれます。 リーリー 以下の画像は上記の例の出力で、最初の画像は上記の関数がブラウザにロードされたときの出力を示し、2 番目の画像はカーソルが最初の画像の上に置かれたときの出力を示します。したがって、ユーザーが指定された画像の上にマウスを移動すると、重なった画像が表示されます。 ＃＃＃結論は＃＃＃ この機能は連絡帳などのアプリケーションで使用され、ユーザーのプロフィールが画像上に表示され、ユーザーが画像をクリックまたはマウスを置くと、特定のプロフィールの詳細が表示されます。この機能を構築している場合は、画像またはアイコン、静止画像、およびマウスオーバー時に表示される画像が同じ寸法であること、つまり幅と高さが等しいことを確認する必要があります。

以上がHTMLとCSSを使用して画像オーバーレイアイコンを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。