HTML + css实现图片勾选功能

咱们先来看实现图，是不是想要的效果，图中的红色方块可用图片替换

话不多说直接上代码
使用了themleaf来做循环

html

<div class="categories-wrapper" th:each="i:${#numbers.sequence(1, 24, 1)}">
   <img src='http://www.bjpowernode.com/Public/Uploads/article/20220216/1644976089@e7601ccbe1b091b506fc05ec3e970a82.jpg' alt='Random image' width="100px" height="100px" />
    <input class='category-input' type="checkbox" id='checker' name="categories[]" value="">
    <label for="checker"></label>
    <input type="hidden" name="categoryFiles[]" value="">
</div>

css

.categories-wrapper {
    position: relative;
    margin: 5px;
    width: 100px; /*请固定长度，否则选择时会改变宽度*/
}
.category-input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
}
.category-input:checked + label{
    background: url("/images/check.png") no-repeat; /* put your image here*/
    background-size: 40px 40px; /*图片等比缩放*/
    height: 40px;
    width: 40px;
    position: absolute;
    top:0;
    left:0;
}