Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie positioniere ich ein Symbol über einem Bild oder Video und löst beim Klicken einen Download aus?

Mary-Kate Olsen
Freigeben: 2024-10-30 22:04:03
Original
296 Leute haben es durchsucht

How to Position an Icon Over an Image or Video and Trigger a Download on Click?

Ein Symbol über einem Bild oder Video positionieren

Problem:
Sie müssen ein Symbol über einem Bild oder Video positionieren ein Bild oder Video und richten Sie es an der unteren linken Ecke aus. Wenn Sie darauf klicken, sollte das Symbol eine Download-Aufforderung für das Bild auslösen.

Lösung:
Um die gewünschte Positionierung zu erreichen, müssen Sie einen relativen Container um das Bild herum erstellen. Stellen Sie dann die Position des Symbols auf „absolut“ ein. Hier ist ein Codebeispiel:

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

.container img {
  display: block;
}

.container .fa-download {
  position: absolute;
  bottom: 0;
  left: 0;
}</code>
Nach dem Login kopieren
<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>
Nach dem Login kopieren

Bootstrap 3 Font-Awesome:
Ja, die gleiche Methode funktioniert für Bootstrap 3 Font-Awesome. Ersetzen Sie die Font Awesome-Version im obigen Code durch Folgendes:

<code class="html"><link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /></code>
Nach dem Login kopieren
<code class="html"><div class="container">
  <img src="https://placekitten.com/300/300" />
  <a href="dog.png" download="new-filename"><i class="fa fa-download"></i></a>
</div></code>
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie positioniere ich ein Symbol über einem Bild oder Video und löst beim Klicken einen Download aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage