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

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

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

`

<img  src="/static/imghwm/default1.png" data-src="https://placekitten.com/300/300" class="lazy" alt="CSS を使用して画像またはビデオ上にアイコンを配置するにはどうすればよいですか?" >
<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="/static/imghwm/default1.png" data-src="https://placekitten.com/300/300" class="lazy" alt="CSS を使用して画像またはビデオ上にアイコンを配置するにはどうすればよいですか?" >
  <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 サイトの他の関連記事を参照してください。