Comment superposer une icône sur une image ou une vidéo pour la fonctionnalité de téléchargement ?

Positionnement d'une icône sur une image ou une vidéo

Ce tutoriel aborde la problématique de la superposition d'une icône sur une image ou une vidéo. L'icône doit résider dans le coin inférieur gauche. Lors de l'interaction de l'utilisateur avec l'icône, une invite devrait apparaître offrant la possibilité de télécharger l'image.

Étapes impliquées

Pour obtenir cet effet, utilisez un conteneur relatif englobant le image. Ensuite, positionnez l'icône avec "position : absolue", en l'alignant sur les bords inférieur et gauche.

Exemple de code

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

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

Considérations supplémentaires

Pour la compatibilité avec la police géniale de Bootstrap 3, utilisez la technique suivante :

<code class="html"><div class="btn btn-primary btn-lg">
    <i class="glyphicon glyphicon-download"></i> Download
</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!