CSS と HTML を使用して画像に選択可能なチェックボックスをオーバーレイするにはどうすればよいですか?

選択可能なチェックボックスを画像にオーバーレイする

画像を選択するためのチェックボックスを表示するには、次の方法を利用します:

CSS ベースのオーバーレイ

指定された固定値画像のサイズを変更するには、チェックボックスの下部と右側のプロパティをゼロに設定して、チェックボックスを絶対に配置します。

HTML コード:

<div class="container">
    <img  src="/static/imghwm/default1.png" data-src="image1.jpg" class="lazy" alt="CSS と HTML を使用して画像に選択可能なチェックボックスをオーバーレイするにはどうすればよいですか?" > 
    <input type="checkbox" class="checkbox"><p><strong>CSS スタイル:</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; }

イベント処理

選択/選択解除イベントの各チェックボックスにクリック ハンドラーをアタッチします。画像クリックイベントは個別に処理できます。