Wie positioniere ich ein Symbol mithilfe von CSS über einem Bild oder Video?-CSS-Tutorial-php.cn

Heim

Web-Frontend

CSS-Tutorial

Wie positioniere ich ein Symbol mithilfe von CSS über einem Bild oder Video?

Oct 25, 2024 am 05:23 AM

How to Position an Icon Over an Image or Video Using CSS?

Ein Symbol über einem Bild oder Video positionieren

Um ein Symbol über einem Bild oder Video zu positionieren, müssen Sie einen Verwandten erstellen Container um das Bild oder Video herum. Stellen Sie dann die Position des Symbols auf absolut ein.

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

Nach dem Login kopieren

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

In diesem Beispiel wird die Klasse „.container“ auf position: relative gesetzt und die Klasse „.fa-download“ ist auf position: absolute gesetzt. Dadurch wird das Symbol in der unteren linken Ecke des Bildes positioniert.

Arbeiten mit Bootstrap 3 Font-Awesome

Um eine Schaltfläche in der unteren linken Ecke eines Bildes hinzuzufügen Mit Bootstrap 3 und Font-Awesome können Sie den folgenden Code verwenden:

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

Nach dem Login kopieren

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

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie positioniere ich ein Symbol mithilfe von CSS über einem Bild oder Video?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn