Wie positioniere ich Symbole mithilfe von CSS über Bildern oder Videos?

Symbole über Bildern oder Videos positionieren

Um ein Symbol über einem Bild oder Video zu platzieren, erstellen Sie einen relativen Container um das Bild und legen Sie fest Die absolute Position des Symbols reicht aus.

Code:

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

.container img {
  display: block;
}

.container .fa-download {
  position: absolute;
  bottom: 0;
  left: 0;
}</code>

HTML:

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

Bootstrap 3-Kompatibilität:

Diese Methode ist auch mit Bootstrap 3 kompatibel. Um eine Schaltfläche in der unteren linken Ecke mit dem FontAwesome-Download-Symbol hinzuzufügen, fügen Sie einfach den folgenden Code hinzu:

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

.container img {
  display: block;
}

.container .btn-download {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 6px;
  background-color: #337ab7;
  color: #fff;
  border: none;
  border-radius: 3px;
}

.container .btn-download i {
  font-size: 1.5em;
}</code>

<code class="html"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<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" class="btn-download"><i class="fas fa-download"></i></a>
</div></code>

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