CSS を使用して画像またはビデオ上にアイコンを配置するにはどうすればよいですか?-CSSチュートリアル-php.cn

CSS を使用して画像またはビデオ上にアイコンを配置するにはどうすればよいですか?

Patricia Arquette

リリース： 2024-10-25 05:23:29

オリジナル

1062 人が閲覧しました

How to Position an Icon Over an Image or Video Using CSS?

画像またはビデオ上にアイコンを配置する

画像またはビデオ上にアイコンを配置するには、相対アイコンを作成する必要があります画像またはビデオの周りのコンテナ。次に、アイコンの位置を絶対位置に設定します。

<img src="https://placekitten.com/300/300">
<a href="dog.png" download="new-filename"><i class="fas fa-download"></i></a>

ログイン後にコピー

この例では、「.container」クラスはposition:relativeに設定されています。、「.fa-download」クラスはposition:Absoluteに設定されます。これにより、アイコンが画像の左下隅に配置されます。

Bootstrap 3 Font-Awesome の使用

画像の左下隅にボタンを追加するにはBootstrap 3 と Font-Awesome を使用すると、次のコードを使用できます:

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

ログイン後にコピー

<code class="html"><link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
  <img src="https://placekitten.com/300/300">
  <a href="dog.png" download="new-filename" class="btn btn-primary btn-download"><i class="fa fa-download"></i></a>
</div></code>

ログイン後にコピー

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