画像またはビデオの左下隅にアイコンを重ねるにはどうすればよいですか?-CSSチュートリアル-php.cn

画像またはビデオの左下隅にアイコンを重ねるにはどうすればよいですか?

Mary-Kate Olsen

リリース： 2024-10-25 04:51:02

オリジナル

858 人が閲覧しました

How to Superimpose an Icon on an Image or Video in the Bottom Left Corner?

画像またはビデオにアイコンを重ねる方法

はじめに

この質問では、画像またはビデオの上にアイコンを配置するテクニックを検討します。ビデオ、特に左下隅。 HTML と CSS を使用する方法と、Font Awesome で Bootstrap 3 を利用する方法の 2 つを検討します。

HTML と CSS を使用してアイコンを配置する

HTML を使用して画像またはビデオ上にアイコンを配置するにはおよび CSS を使用するには、次の手順に従います。

画像またはビデオの周囲に相対コンテナを作成します。
アイコンの位置を絶対位置に設定します。

<code class="html"><div class="container">
   <img src="image.png" alt="Image">
   <a href="icon.png" download="new-filename">
      <i class="fas fa-download"></i>
   </a>
</div></code>

ログイン後にコピー

<code class="css">.container { position: relative; }
.container img { display: block; }
.container .fa-download { position: absolute; bottom:0; left:0; }</code>

ログイン後にコピー

Bootstrap 3 と Font Awesome を使用したアイコンの配置

Bootstrap 3 と Font Awesome を使用して画像またはビデオ上にアイコンを配置するには、次の手順に従います:

Font Awesome CSS ライブラリを含めます。
btn クラスと fa-download アイコンを使用して、目的の位置にボタンを作成します。

<code class="html"><link href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" rel="stylesheet"/>

<button class="btn btn-primary fa fa-download" type="button"></button></code>

ログイン後にコピー

<code class="css">.container { position: relative; }
.container img { display: block; }
.container .btn { position: absolute; bottom:0; left:0; }</code>

ログイン後にコピー