html中两个图片叠放,CSS实现图片叠放(勾选图标)

场景

我们经常会遇到这种场景,有一个待选图片列表,在图片上(可能是右上角也有可能时右下角)叠放一个勾选状态图标,这篇文章就记录实现这个功能的过程。

原理

利用flex布局space-around显示图片列表

在图片的外层加一个div,同时把勾选状态图标加进去

现在的问题就是如何把勾选状态图标移到图片上(这部分可对照最后的代码看)

给图标添加一个margin-right,把图标挤过去,这要求pic-block的宽度固定,如果要到达响应式页面的效果,这个方法是肯定不行的。

将图标设置为position:relative相对定位,然后再添加right:10%让图标往左移动,这样虽然能达到一定的适应性,而且pic-block的宽度不需要固定,但是图标并未脱离文档流,所以在页面中还是会占用空间,而当有的图片有勾选图标时,有的没有图标时,布局就会不那么好看,所以这个方法使用场景也十分有限。

f8af8552ec1c

image.png

将图标设置为position:absolute绝对定位,再添加right:10%让图标往左移动,将pic-block设置为position:relative相对定位,这种方法能达到完全的自适应。图标的绝对定位让图标脱离文档流,使其不占用页面空间,flex布局的图片列表就能一直按照图片的空间(pic-block不设置width,其width由图片的width决定)进行弹性布局;相对布局的pic-block能让绝对定位的图标以它作为父节点(绝对定位以最近的非static布局的元素作为父节点)。这两点使图标一直保持在图片的靠右边10%的位置。(推荐)

f8af8552ec1c

最终效果

最终代码

Document

background-img.jpg

background-img.jpg

background-img.jpg

.pic-list {

display: flex;

height: 15.3vh;

margin-bottom: 1.7vh;

align-items: center;

justify-content: space-around;

}

.pic-list .pic-block-img {

height: 100%;

}

.pic-list .checked-small {

height: 20%;

position: absolute;

bottom: 2%;

right: 10%;

}

.pic-block {

position: relative;

height: 100%;

margin: 0 auto;

}

.hidden {

display: none;

}

let checkedPictures = new Set();

function checkPicture(id) {

if(checkedPictures.has(id)) {

checkedPictures.delete(id);

document.getElementById(id+'-checked').setAttribute("class", "hidden");

}

else {

checkedPictures.add(id);

document.getElementById(id+'-checked').setAttribute("class", "checked-small");

}

}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/533723.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

pyspark sparksession_PySpark 处理数据和数据建模

安装相关包from pyspark.sql import SparkSession from pyspark.sql.functions import udf, when, count, countDistinct from pyspark.sql.types import IntegerType,StringType from pyspark.ml.feature import OneHotEncoderEstimator, StringIndexer, VectorAssembler from…

html loader使用方法,webpack中loader的使用方法,以及几个常用loader的应用小实例

loader:是webpack用来预处理模块的,在一个模块被引入之前,会预先使用loader处理模块的内容。可能,你会遇到当你用webpack打包的时候,提示你需要一个loader来处理文件,那webpack中的loader就是帮助预处理下模…

linq查询不包含某个值的记录_MySQL行(记录)的详细操作

阅读目录一 介绍二 插入数据INSERT三 更新数据UPDATE四 删除数据DELETE五 查询数据SELECT六 权限管理一 介绍MySQL数据操作: DML在MySQL管理软件中,可以通过SQL语句中的DML语言来实现数据的操作,包括使用INSERT实现数据的插入UPDATE实现数据的…

听课评课记录计算机应用,教师听课的评语(精选10篇)

教师听课的评语(精选10篇)通过引导学生提炼信息提出问题解决问题,使学生再次感受了数学与现实生活的密切联系,经历了运用乘法口诀求商的计算方法的形成过程,培养了学生对知识的迁移能力。下面是小编整理的教师听课的评语(精选10篇)&#xff0…

java音频实时传输_会议室智能系统建设方案,实时远程视频协作

2019年,预计会议协作需求将持续增长,创建多功能会议室促进本地、异地协作仍然是一个强大的趋势。无论空间大小或距离远近,政府部门、企业单位以及团体组织为了实现决策指令畅通、管理层次分明,需要通过对会议室环境、多功能会议系…

依赖 netty spring_十分钟带你了解Spring的七大知识点,程序员必了解

Spring框架自诞生以来一直备受开发者青睐,有人亲切的称之为:Spring 全家桶。它包括SpringMVC、SpringBoot、Spring Cloud、Spring Cloud Dataflow等解决方案。很多研发人员把spring看作心目中最好的java项目,没有之一。所以这是重点也是难点&…

南通大学计算机组成原理期末考试题,南通大学计算机组成原理期末考试范围.docx...

南通大学计算机组成原理期末考试范围计算机组成原理选择填空题 15分填空题 20 分计算题 50分设计题 15分第一章计算机的主要性能指标冯诺依曼型计算机的体系结构、组成部分控制器的基本任务计算机系统的层次结构第二章数据与文字的表示方法定点数的表示方法数的机器码表示校验码…

android实现手机拍照以及图片预览功能_手机系统将有A/B分区?Android 11这些变化你关注过吗...

跳票让Android 11沉淀下来并吸引了更多的消费者,在iPhone SE大规模进军主流消费市场的今天,Android这边难道不想依靠新系统扳回一局吗?在人们感叹iOS一些功能似曾相似的时候,Android 11新的突破与创新格外让人振奋。01Android 11欲…

小程序的点赞功能能和浏览次数功能_扫码点餐小程序好用吗?小程序还能实现哪些功能?...

有不少的餐厅现在都可以用小程序扫码点餐了,为什么现在很少用公众号点餐了?原因其实很简单,用公众号点餐用户还要关注公众号,第二个就是在于公众号每天发消息很烦,而小程序则没有这样的烦恼,只在使用的时候…

word计算机课教学反思,《WORD》初中信息技术的教学反思

《WORD》初中信息技术的教学反思本节课在建构主义学习理论指导下,采用“任务驱动”教学策略,借助多媒体课件,对学生实施研究式自主学习教学模式,教学中注重培养学生分析问题、解决问题的能力。通过学习和实际操作,培养…

simulink中mask设置_(实现BPSK学习Verilog)1. Simulink仿真实现

欢迎关注BUG记录知乎专栏和BUG记录公众号,关注BUG记录公众号回复101获取本文使用的Simulink仿真文件微信号:BugRec由于最近研究某个高速接口没什么实质性的突破,实在写不出太好的东西,所以就写点更为基础的东西分享给大家&#xf…

arima模型_[不说人话系列]-ARIMA模型

看文献的时候看到几个统计推理的模型,想要大概了解,想做个系列,记录自己胡说八道的数理笔记过程。如有错误,感谢您指正。文前感谢冯小姐详细认真的技术援助!1- 名称简称:ARIMA模型英文名:Auto r…

认识计算机网络试讲稿,操作系统简介试讲教案.pdf

学习必备 欢迎下载课题 操作系统简介内容章节:第二章第一节 课型:新授课教学时间: 本节内容共授课2课时 授课班级:学习者分析:学生通过第一章的学习,对计算机的软、硬件知识有了初步的了解,。但由于学生普遍对计算机理…

pcb天线和纯铜天线_如何简化天线设计?相控阵波束成形IC来助您

为提高性能,无线通信和雷达系统对天线架构的需求不断增长。只有那些功耗低于传统机械操纵碟形天线的天线才能实现许多新的应用。除了这些要求以外,还需要针对新的威胁或新的用户快速重新定位,传输多个数据流,并以超低的成本……正…

c语言贪吃蛇_C语言贪吃蛇完整代码

#include #include #include //windows编程头文件#include #include //控制台输入输出头文件#ifndef __cplusplustypedef char bool;#define false 0#define true 1#endif//将光标移动到控制台的(x,y)坐标点处void gotoxy(int x, int y){COORD coord;coord.X x;coord.Y y;Se…

上海市计算机一级客观题,2012年上海市高校计算机等级考试(一级)模拟卷客观题...

2012年上海市高校计算机等级考试(一级)模拟卷客观题 (5页)本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦!11.9 积分关于防火墙,以下说法不正确的是____A____。下列属于视频制作的常用软件的…

百度云盘云知梦php_教你搭建私有云盘,简单快速,完全傻瓜式!不限速,永久有效!...

免费的云盘服务有很多,但是总感觉把重要文件存在上面不安全,动不动就跑路或者限速。辛辛苦苦收集的学习资料,一夜直接可能就会付诸东流。最稳妥的方式是存放在本地硬盘中,但是要进行共享或者不同设备之间进行交换,就显…

结束 txt进程_Python多进程抓取拉钩网十万数据

转载:Python多进程抓取拉钩网十万数据准备安装Mongodb数据库其实不是一定要使用MongoDB,大家完全可以使用MySQL或者Redis,全看大家喜好。这篇文章我们的例子是Mongodb,所以大家需要下载它。在Windows中。由于MongoDB默认的数据目录…

计算机休眠怎么唤醒,电脑休眠后,就无法唤醒了?怎么办?快速教你解决这个问题...

电脑是目前人们生活、工作中使用最多的电子产品之一,我们都经常会使用到电脑。但是如果电脑在一段时间后不使用,电脑就会自动进入休眠状态,而在进入休眠状态的之后,只有当我们将电脑唤醒了,电脑才能够回到菜单界面当中…

python爬虫爬取音乐单曲_Python爬取qq音乐的过程实例

一、前言qq music上的音乐还是不少的,有些时候想要下载好听的音乐,但有每次在网页下载都是烦人的登录什么的。于是,来了个qqmusic的爬虫。至少我觉得for循环爬虫,最核心的应该就是找到待爬元素所在url吧。二、Python爬取QQ音乐单曲…