如何僅使用 CSS 將複選框新增至圖像的右下角？

在影像上顯示複選框以供選擇

在Web 開發領域，您可能會遇到這樣的場景：您希望在影像上顯示複選框影像的右下角以啟用選擇功能。本文將為這個常見的查詢提供詳細的解決方案。

基於 CSS 的方法

利用 CSS 的多功能性，您無需依賴額外的程式碼即可實現此效果。只要您的影像具有固定尺寸，您就可以使用以下方法：

• 將複選框絕對放置在影像容器內。
• 將複選框的底部和右側屬性設為零以將其對齊到所需位置。

HTML標記

為每個映像建立一個容器元素，並在其中包含一個複選框。

<div class="container">
    <img  src="/static/imghwm/default1.png" data-src="image1.jpg" class="lazy" alt="如何僅使用 CSS 將複選框新增至圖像的右下角？" >
    <input type="checkbox" class="checkbox"><p><strong>CSS 樣式</strong></p>
<p>定義樣式正確定位複選框。 </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;
}

點擊事件處理

要回應複選框單擊，只需將單擊偵聽器附加到每個複選框元素即可。

var checkboxes = document.getElementsByClassName('checkbox');
for (var i = 0; i <p><strong>範例</strong></p><p>直播示範此技術的範例可以在這裡找到：[即時測試Case](https://jsfiddle.net/Your- Fiddle-URL/)。 </p><p>這種方法提供了一種簡單有效的方法來在圖像上顯示複選框以進行選擇，從而允許您創建用戶友好的介面輕鬆。 </p>