如何使用 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; }

活動處理

將點擊處理程序附加到每個複選框以進行選擇/取消選擇事件。圖片點擊事件可以單獨處理