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

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.

`

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

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>

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

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!