当前位置: 首页 > news >正文

css-遮罩层效果

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>@font-face {font-family: 'icomoon';src: url('fonts/icomoon.eot?418klf');src: url('fonts/icomoon.eot?418klf#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?418klf') format('truetype'),url('fonts/icomoon.woff?418klf') format('woff'),url('fonts/icomoon.svg?418klf#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;}.td {position: relative;width: 300px;height: 200px;margin: 0 auto;}.td img {width: 100%;height: 100%;}.td::before {font-family: 'icomoon';text-align: center;line-height: 200px;content: '\e912';position: absolute;font-size: 30px;color: #fff;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, .4);display: none;}.td:hover::before {display: block;}</style>
</head><body><div class="td"><img src="./imgs/002.gif" alt=""></div>
</body></html>
http://www.zskr.cn/news/10673.html

相关文章:

  • css-浮动围绕文字效果
  • 基于Python+Vue开发的摄影网上预约管理系统源码+运行步骤
  • css-定位让盒子居中显示
  • 在线教育软件开发的全流程解析与优化方案
  • 浅谈云原生数据库
  • AT_abc201_f [ABC201F] Insertion Sort 题解
  • c语言动态内存分配
  • 2025.9.24——1橙
  • 完整教程:MySQL 启动日志报错: File /mysql-bin.index not found (Errcode: 13 - Permission denied)
  • Python爬虫实现大乐透历史数据抓取
  • Java实现双色球历史是否中奖查询
  • 别再混淆 PHP8.1 中纤程 Fibers 和协程 Coroutines 了 一文搞懂它们的区别
  • 详细介绍Seata的AT模式分布式事务
  • VMware VeloCloud 漏洞分析:未授权远程代码执行全链条攻破
  • HJ9 提取不重复的整数
  • PRISMS Junior Varsity Training 20250919
  • 为你的数据选择合适的分布:8个实用的概率分布应用场景和选择指南
  • 台风呢
  • 架设moon节点
  • 字符串哈希模板
  • Markdown基本与阿法
  • isEmpty/isNotEmpty/isNotBlank/isBlank-isAnyEmpty/isNoneEmpty/isAnyBlank/isNoneBlank
  • 牛客周赛 Round 110 E,F题解
  • 安装 elasticsearch-9.1.4 - 集群 和 kibana-9.1.4
  • 实测对比:权威榜单之公众号排版Top 5(含效果对比与适用建议)
  • 原码补码反码
  • C#学习1
  • 02020406 EF Core基础06-EF Core生成的SQL
  • 软工第一次编程
  • 从软件开发公司到用户体验设计公司:如何实现全链路数字化产品服务