Bagaimana untuk Meletakkan Ikon di Atas Imej atau Video Menggunakan CSS?

Letakkan Ikon di Atas Imej atau Video

Untuk meletakkan ikon di atas imej atau video, anda perlu mencipta saudara bekas di sekeliling imej atau video. Kemudian, tetapkan kedudukan ikon menjadi mutlak.

`

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

`

Dalam contoh ini, kelas ".container" ditetapkan kepada kedudukan: relatif , dan kelas ".fa-download" ditetapkan kepada kedudukan: mutlak. Ini meletakkan ikon di sudut kiri bawah imej.

Bekerja dengan Bootstrap 3 Font-Awesome

Untuk menambah butang di sudut kiri bawah imej menggunakan Bootstrap 3 dan Font-Awesome, anda boleh menggunakan kod berikut:

<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="https://placekitten.com/300/300">
  <a href="dog.png" download="new-filename" class="btn btn-primary btn-download"><i class="fa fa-download"></i></a>
</div></code>

Atas ialah kandungan terperinci Bagaimana untuk Meletakkan Ikon di Atas Imej atau Video Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!