Wie überlagert man ein Bild oder Video mit einem Symbol, um die Download-Funktionalität zu nutzen?

Positionieren eines Symbols über einem Bild oder Video

Dieses Tutorial befasst sich mit dem Problem der Überlagerung eines Symbols über einem Bild oder Video. Das Symbol sollte sich in der unteren linken Ecke befinden. Bei der Benutzerinteraktion mit dem Symbol sollte eine Eingabeaufforderung mit der Option zum Herunterladen des Bildes angezeigt werden.

Erforderliche Schritte

Um diesen Effekt zu erzielen, verwenden Sie einen relativen Container, der das Bild umfasst Bild. Anschließend positionieren Sie das Symbol mit „Position: absolut“ und richten es am unteren und linken Rand aus.

Codebeispiel

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

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

Zusätzliche Überlegungen

Für die Kompatibilität mit der Schriftart „Font-Awesome“ von Bootstrap 3 verwenden Sie die folgende Technik:

<code class="html"><div class="btn btn-primary btn-lg">
    <i class="glyphicon glyphicon-download"></i> Download
</div></code>

Das obige ist der detaillierte Inhalt vonWie überlagert man ein Bild oder Video mit einem Symbol, um die Download-Funktionalität zu nutzen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!