HTML + css实现图片勾选功能

big_title

已于 2022-08-27 15:43:37 修改

阅读量1.4k

点赞数

分类专栏： html 图片文章标签： css html 前端

于 2022-08-26 18:42:44 首次发布

本文链接：https://blog.youkuaiyun.com/big_title/article/details/126548712

版权

html 同时被 2 个专栏收录

3 篇文章

订阅专栏

图片

1 篇文章

订阅专栏

本文介绍如何使用Thymeleaf模板引擎通过循环生成一系列带有复选框的图片，并附带实现代码及样式设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

话不多说直接上代码
使用了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;
}