html – 如何在图像上显示复选框以供选择?
发布时间:2020-12-14 18:43:30 所属栏目:资源 来源:网络整理
导读:我想在每张图片的右下角显示一个复选框供选择. 我该怎么做这样的事情? 请记住,点击图片有一个独特的事件(我将设法做!),但点击该复选框应选择/取消选择那个? 解决方法 这可以使用纯CSS完成,假设您具有所有图像的固定宽度和高度.诀窍是为复选框设置绝对位置
我想在每张图片的右下角显示一个复选框供选择.
我该怎么做这样的事情? 请记住,点击图片有一个独特的事件(我将设法做!),但点击该复选框应选择/取消选择那个? 解决方法
这可以使用纯CSS完成,假设您具有所有图像的固定宽度和高度.诀窍是为复选框设置绝对位置,然后将bottom和right分配给零.
HTML示例: <div class="container"> <img src="image1.jpg" /> <input type="checkbox" class="checkbox" id="check1" /> </div> <div class="container"> <img src="image2.jpg" /> <input type="checkbox" class="checkbox" id="check2" /> </div> CSS: .container { position: relative; width: 100px; height: 100px; float: left; margin-left: 10px; } .checkbox { position: absolute; bottom: 0px; right: 0px; } Live test case. 至于点击事件,只需将点击处理程序应用于每个复选框,它就可以正常工作..请参阅this updated fiddle. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
- html – 如何在悬停时展开div及其内容?
- html – CSS:我想在容器中单独定位每个孩子
- 小程序云开发--内容安全审查API云调用
- 一个格式良好的HTML字符串上的javascript – jQuery()会导致
- 项目中常用到的正则表达式(收集+共享=进步)
- Asp.Net Core SignalR 与微信小程序交互笔记
- Javascript Date.parse在黑莓浏览器中返回NaN
- spring(java,js,html) 截图上传图片实例详解
- html – 为什么专业的Web开发人员不应该使用Microsoft Fron
- html – 如何使用flexbox并排将dt和dd并排放在另一个下面的