Bagaimana untuk Meletakkan Ikon di Atas Imej atau Video Menggunakan CSS?-tutorial css-php.cn

Rumah

hujung hadapan web

tutorial css

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

Oct 25, 2024 am 05:23 AM

How to Position an Icon Over an Image or Video Using 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.

`<html>
<head>
<link href="https://use.fontawesome.com/releases /v5.7.1/css/all.css" rel="stylesheet"/>
</head>
<body>
<div class="container">

&lt;img src=&quot;https://placekitten.com/300/300&quot;&gt;
&lt;a href=&quot;dog.png&quot; download=&quot;new-filename&quot;&gt;&lt;i class=&quot;fas fa-download&quot;&gt;&lt;/i&gt;&lt;/a&gt;

Salin selepas log masuk

</div>
</body>
</html>`

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>

Salin selepas log masuk

<code class="html">&lt;link href=&quot;https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css&quot; rel=&quot;stylesheet&quot;/&gt;
&lt;div class=&quot;container&quot;&gt;
  &lt;img src=&quot;https://placekitten.com/300/300&quot;&gt;
  &lt;a href=&quot;dog.png&quot; download=&quot;new-filename&quot; class=&quot;btn btn-primary btn-download&quot;&gt;&lt;i class=&quot;fa fa-download&quot;&gt;&lt;/i&gt;&lt;/a&gt;
&lt;/div&gt;</code>

Salin selepas log masuk

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!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn