Wie positioniere ich Symbole mithilfe von CSS über Bildern oder Videos?-CSS-Tutorial-php.cn

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

Linda Hamilton

Freigeben： 2024-10-25 04:33:02

Original

869 Leute haben es durchsucht

How to Position Icons Over Images or Videos Using CSS?

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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!