Bagaimana untuk menindih Ikon di atas Imej atau Video untuk Kefungsian Muat Turun?

Letakkan Ikon Pada Imej atau Video

Tutorial ini menangani isu menindih ikon pada imej atau video. Ikon harus berada di sudut kiri bawah. Selepas interaksi pengguna dengan ikon, gesaan akan muncul menawarkan pilihan untuk memuat turun imej.

Langkah-Langkah Terlibat

Untuk mencapai kesan ini, gunakan bekas relatif merangkumi imej. Selepas itu, letakkan ikon dengan "kedudukan: mutlak", menjajarkannya di bahagian bawah dan tepi kiri.

Contoh Kod

<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>

Pertimbangan Tambahan

Untuk keserasian dengan font-hebat Bootstrap 3, gunakan teknik berikut:

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

Atas ialah kandungan terperinci Bagaimana untuk menindih Ikon di atas Imej atau Video untuk Kefungsian Muat Turun?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!