CSS常用遮罩层
2024-08-27 15:42:25
CSS常用遮罩层
应用场景:
上传了一张图片,鼠标移入到图片上的时候显示遮罩层,并且提示点击删除。
通过改变遮罩层的透明度来实现显示隐藏提示信息
<div class="parent">
<img src="" >
<div class="mask">点击删除图片</div>
</div>
下面是CSS
.mask {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
font: 20px/1.2 Microsoft YaHei, Arial, Helvetica, Arial, "\5b8b\4f53", sans-serif;
text-align: center;
background: #393D49;
color: #fff;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
}
.parent:hover .mask {
opacity: .8;
}
转载于:https://my.oschina.net/af666/blog/870142
最新文章
- Maven基础使用
- 2016.6.13 php与MySQL数据库交互之数据库中的商品信息展示
- Deep Learning and the Triumph of Empiricism
- Linux 网络编程基础(2)-- 获取主机信息
- Objective-c 数组对象
- delphi 使用superobject实现jsonrpc的http远程调用 good
- 在python正在使用mysql
- java虚拟机学习-慢慢琢磨JVM(2)
- Java经典编程题50道之四
- EF CodeFirst系列(1)---CodeFirst简单入门
- sqlserver 并行度
- [luogu2446][bzoj2037][SDOI2008]Sue的小球【区间DP】
- Individual Project-word frequency
- TCP/IP_网络基础知识
- 【hbuilder】如何根据Geolocation获得的坐标获取所在城市?
- 37. Sudoku Solver (Array;Back-Track)
- JVM内存模型一
- 无法登录 MySQL 服务器 mysqli_real_connect() (HY000 2002) No such file or directory
- DLL Injection and Hooking
- 【CODEFORCES】 B. Random Teams
热门文章
- 细数Java项目中用过的配置文件(YAML篇)
- npm install报错:chromedriver@2.27.2 install: node install.js
- 如何初学python?资深程序员浅谈,教你学会入门python
- Android传感器--光照传感器使用
- Thinking in Java,Fourth Edition(Java 编程思想,第四版)学习笔记(十)之Inner Classes
- Daily Scrum 1/4/2015
- Mysql使用终端操作数据库
- XML外部实体注入[转载]
- 单图像三维重建、2D到3D风格迁移和3D DeepDream
- keras数据集读取