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

CSS实现鼠标移至图片上显示遮罩层及文字效果

效果图:

在这里插入图片描述
在这里插入图片描述

1、将遮罩层html代码与图片放在一个div

我是放在 .proBK里。

  <div class="proBK"><img src="../../assets/image/taskPro.png" class="proImg"><div class="imgText"><h5>用户在线发布任务</h5></div></div>

2、为图片及遮罩层添加样式

图片:relative

遮罩层:absolute

使两者样式重合。

鼠标不在图片上时,遮罩层不显示 .imgText{ opacity: 0; } 。

.proBK {width: 380px;height: 260px;margin-bottom: 20px;position: relative;
}.proImg {width: 100%;height: 100%;}.imgText{position: absolute;background: rgba(106, 64, 155, 0.8);top: 0px;left: 0px;width: 100%;height: 100%;cursor: pointer;opacity: 0;color: #ffffff;text-align: center;
}h5 {padding-top: 103px;font-size: 18px;
}.proBK .imgText:hover {opacity: 1;}

3、使用hover

改变透明度,使遮罩层显示。

 .proBK .imgText:hover {opacity: 1;}

相关文章:

CSS实现鼠标移至图片上显示遮罩层及文字效果

效果图&#xff1a; 1、将遮罩层html代码与图片放在一个div 我是放在 .proBK里。 <div class"proBK"><img src"../../assets/image/taskPro.png" class"proImg"><div class"imgText"><h5>用户在线发布任务&l…...

【OpenCV实现图像:图像处理技巧之空间滤波】

文章目录 概要导入库空间过滤器模板展示效果分析与总结 概要 空间滤波器是数字图像处理中的基本工具之一。它通过在图像的每个像素位置上应用一个特定的滤波模板&#xff0c;根据该位置周围的相邻像素值进行加权操作&#xff0c;从而修改该像素的值。这种加权操作能够突出或模…...

载波通讯电表的使用年限是多久?

随着科技的飞速发展&#xff0c;智能家居、物联网等概念逐渐深入人心&#xff0c;载波通讯电表作为一种新型的智能电表&#xff0c;凭借其低功耗、高可靠性、远程通讯等优点&#xff0c;广泛应用于居民用电、工业生产等领域。那么&#xff0c;载波通讯电表的使用年限是多久呢&a…...

微信小程序多端应用 Donut 多端编译

目前支持 wxml、wxs、js/ts、json&#xff0c;less/sass 等文件类型&#xff0c;资源支持通过配置区分不同平台 wxml中使用 <!-- #if MP --><view class"test-view">wechat</view><!-- #elif IOS --><view class"test-view"…...

调试 Mahony 滤波算法的思考 10

调试 Mahony 滤波算法的思考 1. 说在前面的2.Mahony滤波算法的核心思想3. 易懂的理解 Mahony 滤波算法的过程4. 其他的一些思考5. 民间 9轴评估板 1. 说在前面的 之前调试基于QMI8658 6轴姿态解算的时候&#xff0c;我对Mahony滤波的认识还比较浅薄。初次的学习和代码的移植让…...

Bean——IOC(Github上有代码)

源码 https://github.com/cmdch2017/Bean_IOC.git 获取Bean对象 BeanFactory Bean的作用域 第三方Bean需要用Bean注解 比如消息队列项目中&#xff0c;需要用到Json的消息转换器&#xff0c;这是第三方的Bean对象&#xff0c;所以不能用Component&#xff0c;而要用Bean …...

功能更新|Leangoo领歌免费敏捷工具支持SAFe大规模敏捷框架

Leangoo领歌是一款永久免费的专业的敏捷开发管理工具&#xff0c;提供端到端敏捷研发管理解决方案&#xff0c;涵盖敏捷需求管理、任务协同、进展跟踪、统计度量等。 
 Leangoo可以支持敏捷研发管理全流程&#xff0c;包括小型团队敏捷开发&#xff0c;规模化敏捷SAFe&#xf…...

漏刻有时百度地图API实战开发(1)华为手机无法使用addEventListener click 的兼容解决方案

漏刻有时百度地图API实战开发(1)华为手机无法使用addEventListener click 的兼容解决方案漏刻有时百度地图API实战开发(2)文本标签显示和隐藏的切换开关漏刻有时百度地图API实战开发(3)自动获取地图多边形中心点坐标漏刻有时百度地图API实战开发(4)显示指定区域在移动端异常的解…...

交流信号继电器 DX-31BJ/AC220V JOSEF约瑟 电压启动 面板嵌入式安装

DX系列信号继电器由矩形脉冲激磁&#xff0c;磁钢保持。本继电器为双绕组。工作线圈可为电压型&#xff0c;亦可为电流型。复归线圈为电压型。继电器的工作电流或工作电压为长脉冲&#xff0c;亦可为脉冲不小于20mS的短脉冲。 系列型号 DX-31B信号继电器DX-31BJ信号继电器 D…...

SpringCloudAlibaba系列之Nacos配置管理

目录 说明 认识配置中心 Nacos架构图 Nacos配置管理实现原理 核心源码分析-客户端 核心源码分析-服务端 配置修改的实时通知 主流配置中心对比 小小收获 说明 本篇文章主要目的是从头到尾比较粗粒度的分析Nacos配置中心的一些实现&#xff0c;很多细节没有涉及&#…...

Kyligence Copilot 亮相第六届进博会,增添数智新活力

11月5日&#xff0c;第六届中国国际进口博览会&#xff08;以下简称“进博会”&#xff09;在上海国家会展中心盛大启幕&#xff0c;众多新科技、新成果、新展品亮相本届进博会。作为阿斯利康&#xff08;AstraZeneca&#xff09;合作伙伴&#xff0c;跬智信息&#xff08;Kyli…...

MySQL 批量修改表的列名为小写

1、获取脚本 SELECT concat( alter table , TABLE_NAME, change column , COLUMN_NAME, , lower( COLUMN_NAME ), , COLUMN_TYPE, comment \, COLUMN_COMMENT, \; ) AS 脚本 FROM information_schema.COLUMNS WHERE TABLE_SCHEMA 数据库名 and TABLE_NAME表名-- 大写是up…...

ElasticSearch 查询方法示例 java

public List<PricePolicyConditionDTO> queryEs(OrderPriceOutDTO param, List<String> materialCodeList, List<String> categoryCodeList) {BoolQueryBuilder mainQueryBoolBuilder new BoolQueryBuilder();//销售组织if (CharSequenceUtil.isNotEmpty(pa…...

5G毫米波通信中的关键技术

随着5G技术的快速发展&#xff0c;毫米波通信作为其中的一项重要技术&#xff0c;在高速数据传输、低延迟通信和大规模连接等方面具有显著的优势。本文将探讨5G毫米波通信中的关键技术&#xff0c;包括毫米波频段的选择、信号处理技术和MIMO技术等。 一、毫米波频段的选择 毫米…...

2.3.3 交换机的RSTP技术

实验2.3.3 交换机的RSTP技术 一、任务描述二、任务分析三、具体要求四、实验拓扑五、任务实施1.交换机的基本配置。2.开启交换机的STP。3.配置SW3A和SW3B上STP的优先级。将SW3A配置为根交换机&#xff0c;SW3B配置为备用根交换机。4.配置SW2A和SW2B的边缘接口 六、任务验收七、…...

国外访问学者/博士后留学人员反诈骗指南

访问学者/博士后/联合培养博士人员出国后&#xff0c;对当地环境及政策不熟悉&#xff0c;需要提高防范意识&#xff0c;为此&#xff0c;知识人网小编特整理这篇反诈骗指南&#xff0c;提醒留学人员防微杜渐、未雨绸缪。 近日&#xff0c;多国使馆发布相关提醒&#xff1a;不法…...

设计模式之组合模式-创建层次化的对象结构

目录 概述概念主要角色应用场景 组合模式的实现类图NS图基本代码组合模式的精髓意外收获&#xff08;❀❀&#xff09; 应用示例-公司组织架构管理需求结构图代码 组合模式的优缺点优点缺点 总结 概述 概念 组合模式是一种结构型设计模式&#xff0c;它允许将对象组合成树形结…...

Windows 有趣功能集锦

Windows 有趣功能集锦 隐藏文件或文件夹 CMD 运行以下命令隐藏 # attrib h <文件或文件夹名称> attrib r h s a 测试显示 # attrib h <文件或文件夹名称> attrib -r -h -s -a 测试使视频显示为图片 准备一个视频文件和一个需要显示的图片先将视频压缩成压缩文…...

【nodejs版playwright】02-支持多套测试环环境执行用例

日常测试中&#xff0c;一套测试用例需支持在不同的测试环境运行&#xff0c;如staging、production 因为涉及不同的测试环境&#xff0c;那使用的环境变量或参数就不一样&#xff0c;如staging登录可能用到的用户名是A&#xff0c;而production可能用到的是b。 所以需要有一个…...

React高阶组件(Higher-Order Components, HOCs)

React 高阶组件 (Higher Order Components, HOCs) 是一种模式&#xff0c;让组件具备一定的扩展能力。它是函数式编程思想在 React 应用程序中的体现。HOCs 可以让你重用组件&#xff0c;提高组件的可复用性。 HOCs 是什么&#xff1f; 高阶组件实际上是一个函数&#xff0c;…...

软件隐私性的数据保护与合规遵循

在数字化时代&#xff0c;软件隐私性的数据保护与合规遵循已成为企业和用户共同关注的核心议题。随着数据泄露事件频发和全球隐私法规的不断完善&#xff0c;如何确保软件在收集、存储和处理用户数据时既安全又合规&#xff0c;成为开发者与运营者的重要挑战。本文将从数据加密…...

从‘永久测试版’到LTS:聊聊软件版本命名背后的产品哲学与团队协作

从‘永久测试版’到LTS&#xff1a;软件版本命名背后的产品哲学与团队协作 当Gmail在2004年推出时&#xff0c;它带着一个鲜红的"BETA"标签——这个标签持续了整整五年。这种看似反常的现象背后&#xff0c;隐藏着科技行业对软件成熟度定义的深刻变革。版本号不再只是…...

别再折腾了!2024年最新TeX Live + TeXstudio保姆级安装配置指南(含清华镜像加速)

2024年LaTeX终极配置指南&#xff1a;从零搭建高效学术写作环境 第一次接触LaTeX时&#xff0c;我被那些复杂的命令和报错信息吓得不轻。记得研究生入学第二天&#xff0c;导师扔给我一份LaTeX模板说"用这个写论文"&#xff0c;结果光是安装环境就折腾了整整三天。如…...

WPS 通配符神技:一键上标参考文献 + 中英文自动加空格

WPS 高效排版技巧&#xff1a;一键上标参考文献 & 中英文自动加空格 两个实用的 Word 通配符查找替换技巧&#xff0c;让你的学术文档瞬间专业&#xff01; 在撰写论文、报告或技术文档时&#xff0c;我们常常遇到两个排版痛点&#xff1a; 参考文献引用 [1] 没有上标&…...

JX3Toy:5分钟掌握剑网3自动化操作,告别手忙脚乱的副本时光

JX3Toy&#xff1a;5分钟掌握剑网3自动化操作&#xff0c;告别手忙脚乱的副本时光 【免费下载链接】JX3Toy 一个自动化测试DPS的小工具 项目地址: https://gitcode.com/GitHub_Trending/jx/JX3Toy 你是否曾在剑网3的副本中手忙脚乱&#xff0c;按错技能顺序&#xff1f;…...

边走边聊 Python 3.8:pandas 内存优化技巧(深度版)

pandas 内存优化技巧(深度版)——专为 Python 3.8 + Windows 7 系统打造 大家好!第9篇我们用 pandas 处理了手机记账 CSV,很多读者反馈“Win7 老机器内存只有 4~8GB,处理 10 万行以上文件就卡死了”。今天专门出一期内存优化实战技巧,全部代码在 Python 3.8 + Windows 7…...

Asian Beauty Z-Image Turbo 5分钟快速部署:本地东方美学AI绘画工具一键启动

Asian Beauty Z-Image Turbo 5分钟快速部署&#xff1a;本地东方美学AI绘画工具一键启动 想象一下&#xff0c;你正在策划一个东方美学主题的艺术展&#xff0c;需要大量符合传统审美的视觉素材&#xff1b;或者你是一位独立创作者&#xff0c;希望为自己的小说生成具有东方韵…...

智能体的决策机制

在人工智能领域&#xff0c;智能体&#xff08;Agent&#xff09;作为具备环境感知、信息处理、自主决策与行为执行能力的计算实体&#xff0c;其核心价值在于通过高效决策机制&#xff0c;实现与环境的动态交互、目标达成及持续优化。决策机制是智能体的“大脑中枢”&#xff…...

Qwen3.5-9B-GGUF基础教程:app.py源码结构解析与Gradio组件扩展方法

Qwen3.5-9B-GGUF基础教程&#xff1a;app.py源码结构解析与Gradio组件扩展方法 1. 项目背景与模型介绍 Qwen3.5-9B是阿里云开源的通义千问3.5系列中的90亿参数稠密模型&#xff0c;采用Gated Delta Networks架构和混合注意力机制&#xff08;75%线性25%标准&#xff09;。原生…...

模型加载慢、吞吐暴跌、OOM频发,MCP AI推理配置错误诊断与秒级修复方案

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;MCP AI推理配置的典型故障全景图 在大规模模型协同平台&#xff08;MCP&#xff09;中&#xff0c;AI推理配置的稳定性直接决定服务可用性与响应质量。常见故障并非孤立发生&#xff0c;而是呈现链式耦…...