Bagaimana Meletakkan Ikon Di Atas Imej atau Video Menggunakan CSS?

Letakkan Ikon Di Atas Imej atau Video

Untuk meletakkan ikon di atas imej atau video, mencipta bekas relatif di sekeliling imej dan menetapkan kedudukan ikon kepada mutlak sudah memadai.

Kod:

<code class="css">.container {
  position: relative;
}

.container img {
  display: block;
}

.container .fa-download {
  position: absolute;
  bottom: 0;
  left: 0;
}</code>

HTML:

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

Keserasian Bootstrap 3:

Kaedah ini juga serasi dengan Bootstrap 3. Untuk menambah butang di sudut kiri bawah menggunakan ikon muat turun FontAwesome, cuma tambah kod berikut:

<code class="css">.container {
  position: relative;
}

.container img {
  display: block;
}

.container .btn-download {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 6px;
  background-color: #337ab7;
  color: #fff;
  border: none;
  border-radius: 3px;
}

.container .btn-download i {
  font-size: 1.5em;
}</code>

<code class="html"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<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" class="btn-download"><i class="fas fa-download"></i></a>
</div></code>

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