ダウンロード機能のために画像またはビデオの上にアイコンを重ねるにはどうすればよいですか?

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

このチュートリアルでは、画像またはビデオ上にアイコンを重ねる問題について説明します。アイコンは左下隅にあるはずです。ユーザーがアイコンを操作すると、画像をダウンロードするオプションを提供するプロンプトが表示されます。

関係する手順

この効果を実現するには、画像。続いて、「position:Absolute」でアイコンを下端と左端に揃えて配置します。

コード例

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

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

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

その他の考慮事項

Bootstrap 3 の font-awesome との互換性を確保するには、次の手法を使用します。

<code class="html"><div class="btn btn-primary btn-lg">
    <i class="glyphicon glyphicon-download"></i> Download
</div></code>

以上がダウンロード機能のために画像またはビデオの上にアイコンを重ねるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。