Bagaimanakah Saya Boleh Menindih Kotak Semak Boleh Dipilih pada Imej Menggunakan CSS dan HTML?

Menindih Kotak Pilihan Boleh Pilih pada Imej

Untuk memaparkan kotak pilihan untuk memilih imej, gunakan pendekatan berikut:

Tindan berasaskan CSS

Memandangkan dimensi imej tetap, letakkan kotak semak sepenuhnya dengan menetapkan sifat bawah dan kanannya kepada sifar.

Kod HTML:

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

Penggayaan CSS:

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

Pengendalian Acara

Lampirkan pengendali klik pada setiap kotak pilihan untuk acara pemilihan/nyahpilihan. Acara klik imej boleh dikendalikan secara berasingan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menindih Kotak Semak Boleh Dipilih pada Imej Menggunakan CSS dan HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!