Wie kann ich Kontrollkästchen in der rechten unteren Ecke von Bildern hinzufügen, indem ich nur CSS verwende?

Anzeigen von Kontrollkästchen auf Bildern zur Auswahl

Im Bereich der Webentwicklung stoßen Sie möglicherweise auf ein Szenario, in dem Sie Kontrollkästchen auf den Bildern anzeigen möchten rechte untere Ecke der Bilder, um die Auswahlfunktion zu aktivieren. Dieser Artikel bietet eine detaillierte Lösung für diese häufige Frage.

CSS-basierter Ansatz

Durch die Nutzung der Vielseitigkeit von CSS können Sie diesen Effekt erzielen, ohne auf zusätzlichen Code angewiesen zu sein . Solange Ihre Bilder feste Abmessungen haben, können Sie den folgenden Ansatz verwenden:

• Positionieren Sie das Kontrollkästchen absolut innerhalb des Bildcontainers.
• Setzen Sie die unteren und rechten Eigenschaften des Kontrollkästchens auf Null, um es an der gewünschten Stelle auszurichten.

HTML Markup

Erstellen Sie für jedes Bild ein Containerelement und fügen Sie darin ein Kontrollkästchen ein.

<div class="container">
    <img  src="/static/imghwm/default1.png" data-src="image1.jpg" class="lazy" alt="Wie kann ich Kontrollkästchen in der rechten unteren Ecke von Bildern hinzufügen, indem ich nur CSS verwende?" >
    <input type="checkbox" class="checkbox"><p><strong>CSS-Stile</strong></p>
<p>Definieren Sie die Stile um das Kontrollkästchen richtig zu positionieren.</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;
}

Klicken Sie auf Ereignis Handhabung

Um auf Checkbox-Klicks zu reagieren, fügen Sie einfach einen Klick-Listener an jedes Checkbox-Element an.

var checkboxes = document.getElementsByClassName('checkbox');
for (var i = 0; i <p><strong>Beispiel</strong></p><p>Ein Live Ein Beispiel, das diese Technik demonstriert, finden Sie hier: [Live-Test Case](https://jsfiddle.net/Your-Fiddle-URL/).</p><p>Dieser Ansatz bietet eine einfache und effektive Möglichkeit, Kontrollkästchen über Bildern zu Auswahlzwecken anzuzeigen, sodass Sie benutzerfreundliche Schnittstellen erstellen können mit Leichtigkeit.</p>