Bagaimana untuk Meletakkan Ikon di Atas Imej atau Video dan Mencetuskan Muat Turun pada Klik?

Letakkan Ikon Pada Imej atau Video

Masalah:
Anda perlu meletakkan ikon di atas imej atau video, menjajarkannya ke sudut kiri bawah. Apabila diklik, ikon harus mencetuskan gesaan muat turun untuk imej.

Penyelesaian:
Untuk mencapai kedudukan yang diingini, anda perlu mencipta bekas relatif di sekeliling imej. Kemudian, tetapkan kedudukan ikon kepada mutlak. Berikut ialah 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>

Bootstrap 3 Font-Awesome:
Ya, kaedah yang sama berfungsi untuk Bootstrap 3 Font-Awesome. Gantikan versi Font Awesome dalam kod di atas dengan yang berikut:

<code class="html"><link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /></code>

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

Atas ialah kandungan terperinci Bagaimana untuk Meletakkan Ikon di Atas Imej atau Video dan Mencetuskan Muat Turun pada Klik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!