Comment positionner des icônes sur des images ou des vidéos à l'aide de CSS ?-tutoriel CSS-php.cn

Comment positionner des icônes sur des images ou des vidéos à l'aide de CSS ?

Linda Hamilton

Libérer： 2024-10-25 04:33:02

original

862 Les gens l'ont consulté

How to Position Icons Over Images or Videos Using CSS?

Positionnement des icônes sur des images ou des vidéos

Pour placer une icône sur une image ou une vidéo, créer un conteneur relatif autour de l'image et définir le la position de l'icône sur absolue suffira.

Code :

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

.container img {
  display: block;
}

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

Copier après la connexion

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>

Copier après la connexion

Compatibilité Bootstrap 3 :

Cette méthode est également compatible avec Bootstrap 3. Pour ajouter un bouton dans le coin inférieur gauche à l'aide de l'icône de téléchargement FontAwesome, ajoutez simplement le code suivant :

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

Copier après la connexion

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

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!