Maison >interface Web >tutoriel CSS >Comment puis-je superposer des cases à cocher sélectionnables sur des images à l'aide de CSS et HTML ?

Comment puis-je superposer des cases à cocher sélectionnables sur des images à l'aide de CSS et HTML ?

Patricia Arquette
Patricia Arquetteoriginal
2024-11-27 22:55:14481parcourir

How Can I Overlay Selectable Checkboxes on Images Using CSS and HTML?

Superposition de cases à cocher sélectionnables sur les images

Pour afficher une case à cocher pour sélectionner des images, utilisez l'approche suivante :

Superposition basée sur CSS

Étant donné les dimensions de l'image fixes, positionnez la case à cocher absolument par définir ses propriétés inférieure et droite à zéro.

Code HTML :

<div class="container">
    <img src="image1.jpg"> 
    <input type="checkbox" class="checkbox">

Style CSS :

.container { position: relative; width: 100px; height: 100px; float: left; margin-left: 10px; }
.checkbox { position: absolute; bottom: 0px; right: 0px; }

Gestion des événements

Attachez des gestionnaires de clics à chaque case à cocher pour événements de sélection/désélection. L'événement de clic sur l'image peut être géré séparément.

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