Maison >interface Web >tutoriel CSS >Comment positionner des icônes sur des images ou des vidéos à l'aide de CSS ?

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

Linda Hamilton
Linda Hamiltonoriginal
2024-10-25 04:33:02867parcourir

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>

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>

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

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn