Comment superposer une icône sur une image ou une vidéo dans le coin inférieur gauche ?

Comment superposer une icône sur une image ou une vidéo

Introduction

Dans cette question, nous explorons les techniques pour positionner une icône sur une image ou vidéo, en particulier dans le coin inférieur gauche. Nous examinerons deux méthodes : utiliser HTML et CSS et utiliser Bootstrap 3 avec Font Awesome.

Positionnement d'une icône avec HTML et CSS

Pour positionner une icône sur une image ou une vidéo à l'aide de HTML et CSS, suivez ces étapes :

1. Créez un conteneur relatif autour de l'image ou de la vidéo.
2. Définissez la position de l'icône sur absolue.
3. Positionnez l'icône à l'aide du propriétés en bas et à gauche.

<code class="html"><div class="container">
   <img src="image.png" alt="Image">
   <a href="icon.png" download="new-filename">
      <i class="fas fa-download"></i>
   </a>
</div></code>

<code class="css">.container { position: relative; }
.container img { display: block; }
.container .fa-download { position: absolute; bottom:0; left:0; }</code>

Positionnement d'une icône avec Bootstrap 3 et Font Awesome

Pour positionner une icône sur une image ou une vidéo à l'aide de Bootstrap 3 et Font Awesome , suivez ces étapes :

1. Incluez la bibliothèque CSS Font Awesome.
2. Créez un bouton dans la position souhaitée à l'aide de la classe btn et de l'icône de téléchargement fa.

<code class="html"><link href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" rel="stylesheet"/>

<button class="btn btn-primary fa fa-download" type="button"></button></code>

<code class="css">.container { position: relative; }
.container img { display: block; }
.container .btn { position: absolute; bottom:0; left:0; }</code>

Conclusion

En mettant en œuvre ces méthodes, vous pouvez positionner et afficher efficacement des icônes sur des images ou des vidéos pour fournir des fonctionnalités supplémentaires ou des repères visuels.

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!