Bagaimana untuk Menindih Ikon pada Imej atau Video di Sudut Kiri Bawah?

Cara Menindih Ikon di atas Imej atau Video

Pengenalan

Dalam soalan ini, kami meneroka teknik untuk meletakkan ikon di atas imej atau video, khususnya di sudut kiri bawah. Kami akan mengkaji dua kaedah: menggunakan HTML dan CSS, dan menggunakan Bootstrap 3 dengan Font Awesome.

Meletakkan Ikon dengan HTML dan CSS

Untuk meletakkan ikon pada imej atau video menggunakan HTML dan CSS, ikut langkah berikut:

1. Buat bekas relatif di sekeliling imej atau video.
2. Tetapkan kedudukan ikon kepada mutlak.
3. Letakkan ikon menggunakan sifat bawah dan kiri.

<code class="html"><div class="container">
   <img src="image.png" alt="Image">
   <a href="icon.png" download="new-filename">
      <i class="fas fa-download"></i>
   </a>
</div></code>

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

Letakkan Ikon dengan Bootstrap 3 dan Font Awesome

Untuk meletakkan ikon pada imej atau video menggunakan Bootstrap 3 dan Font Awesome , ikuti langkah berikut:

1. Sertakan pustaka CSS Font Awesome.
2. Buat butang dalam kedudukan yang diingini menggunakan kelas btn dan ikon muat turun fa.

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

<button class="btn btn-primary fa fa-download" type="button"></button></code>

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

Kesimpulan

Dengan melaksanakan kaedah ini, anda boleh meletakkan dan memaparkan ikon dengan berkesan pada imej atau video untuk menyediakan fungsi tambahan atau isyarat visual.

Atas ialah kandungan terperinci Bagaimana untuk Menindih Ikon pada Imej atau Video di Sudut Kiri Bawah?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!