Wie kann ich mithilfe von CSS und HTML auswählbare Kontrollkästchen auf Bildern überlagern?

Auswählbare Kontrollkästchen auf Bildern überlagern

Um ein Kontrollkästchen zum Auswählen von Bildern anzuzeigen, verwenden Sie den folgenden Ansatz:

CSS-basiertes Overlay

Positionieren Sie das Kontrollkästchen bei festen Bildabmessungen absolut durch Einstellung seine unteren und rechten Eigenschaften auf Null.

HTML-Code:

<div class="container">
    <img  src="/static/imghwm/default1.png" data-src="image1.jpg" class="lazy" alt="Wie kann ich mithilfe von CSS und HTML auswählbare Kontrollkästchen auf Bildern überlagern?" > 
    <input type="checkbox" class="checkbox"><p><strong>CSS-Styling:</strong></p>
<pre class="brush:php;toolbar:false">.container { position: relative; width: 100px; height: 100px; float: left; margin-left: 10px; }
.checkbox { position: absolute; bottom: 0px; right: 0px; }

Ereignisbehandlung

Klick-Handler an jedes Kontrollkästchen zur Auswahl/Abwahl anhängen Ereignisse. Das Bildklickereignis kann separat behandelt werden.