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

遮罩解决图片悬浮操作看不到的情况

未悬浮效果

在这里插入图片描述

悬浮效果

在这里插入图片描述

如果仅仅是添加绝对定位,那么遇到白色图片,就会看不到白色字体。通过遮罩(绝对定位+透明度)就可以解决这个问题。

<script setup>
</script><template><div class="box"><el-image class="img" src="/public/p1.png"/><div class="mask"><div>删除</div></div></div>
</template><style lang="scss" scoped>
.box {height: 100px;width: 100px;position: relative;margin: 100px auto;.img {width: 100%;height: 100%;}.mask {height: 100%;width: 100%;position: absolute;left: 0;top: 0;display: flex;justify-content: center;align-items: center;background-color: rgba(0, 0, 0, 0.3);opacity: 0;transition: opacity .5s ease-in-out;cursor: pointer;color: #ffffff;}&:hover .mask {opacity: 1;}
}
</style>

相关文章:

遮罩解决图片悬浮操作看不到的情况

未悬浮效果 悬浮效果 如果仅仅是添加绝对定位&#xff0c;那么遇到白色图片&#xff0c;就会看不到白色字体。通过遮罩&#xff08;绝对定位透明度&#xff09;就可以解决这个问题。 <script setup> </script><template><div class"box"><…...

IoT网关的主要功能有哪些?天拓四方

在数字化浪潮席卷全球的今天&#xff0c;物联网&#xff08;IoT&#xff09;技术凭借其独特的优势&#xff0c;逐渐在各个领域展现出强大的生命力。而IoT网关&#xff0c;作为连接物理世界与数字世界的桥梁&#xff0c;其在物联网体系中的作用愈发凸显。 一、数据聚合与预处理…...

继承实现单例模式的探索(一)

前言 之前看到朋友采用继承的方式来实现单例模式&#xff0c;觉得很厉害&#xff0c;随后自己去探索了一番&#xff0c;以前实现单例模式都是把代码内联到具体的类中&#xff0c;这使得工程中每次需要使用单例模式时&#xff0c;都采用拷贝的方式&#xff0c;增加了很多冗余代码…...

【代码实现】opencv 高斯模糊和pytorch 高斯模糊

wiki百科 Gaussian Blur&#xff0c;也叫高斯平滑&#xff0c;是在Adobe Photoshop、GIMP以及Paint.NET等图像处理软件中广泛使用的处理效果&#xff0c;通常用它来减少图像噪声以及降低细节层次。 opencv实现 opencv实现高斯滤波有两种方式&#xff0c; 1、是使用自带的cv2…...

python基础语法2

文章目录 1.顺序语句2.条件语句2.1 语法格式 3.缩进与代码块4.空语句 pass5.循环语句5.1 while循环5.2 for循环 5.3 continue与break 1.顺序语句 默认情况下&#xff0c;python的代码都是按照从上到下的顺序依次执行的。 print(hello ) print(world)结果一定是hello world。写…...

linux第一课:下载与安装

这是我的个人复习笔记&#xff0c;草稿箱字太多会卡就发这了&#xff0c;欢迎大家阅读。 Kali Linux&#xff0c;黑客必备神器。跟着我&#xff0c;带你从入门到入狱&#xff01; 第一课&#xff0c;下载与安装。 第一步&#xff1a; 在官网下载Centos镜像&#xff1a;http…...

虚拟机添加共享文件夹后仍无法显示文件

参考: https://blog.csdn.net/Pretender_1205/article/details/134859089 进入/mnt/hgfs目录下执行 sudo mount -t fuse.vmhgfs-fuse .host:/ /mnt/hgfs -o allow_other/mnt/hgfs 是挂载点&#xff0c;也可以修改为其他挂载点-o allow_other表示允许其他用户(普通用户)访问共…...

OSPF协议

基础知识 OSPF:开放式最短路径优先协议 (无类别链路状态IGP动态协议) OSPF的特点&#xff1a; 1.OSPF将自治系统划分为逻辑上的区域&#xff0c;使用LSA来发布路由信息&#xff0c;并通过OSPF报文在区域内路由器之间交互建立链路状态数据库和路由表 2.支持等开销的负载均衡…...

行为设计模式 -观察者模式- JAVA

观察者模式 一.简介二. 案例2.1 抽象主题&#xff08;Subject&#xff09;2.2 具体主题&#xff08;Concrete Subject&#xff09;2.3 抽象观察者&#xff08;Observer&#xff09;2.4 具体观察者&#xff08;Concrete Observer&#xff09;2.5 测试 三. 结论3.1 优缺点3.2 使用…...

在阿里工作是一种什么体验?

很多人都对在阿里工作感到好奇&#xff0c;今天就来给大家分享一下在阿里工作是一种什么体验~ 首先&#xff0c;先来介绍一下阿里的职位等级划分标准。 简单来讲&#xff0c;阿里的职位等级可以认为是 P 序列和 M 序列&#xff0c;但目前 M 序列已经不太对中下层员工开放了&…...

828华为云征文|华为云Flexus云服务器X实例——uniapp功能开发、搭建股票系统选择用什么服务器比较好?

在二次开发、安装搭建股票系统时&#xff0c;选择华为云Flexus X服务器是一个值得考虑的优质选项。以下是一些具体的建议&#xff1a; 测试环境&#xff1a;Linux系统CentOS7.6、宝塔、PHP7.3、MySQL5.7&#xff0c;根目录public&#xff0c;伪静态thinkphp&#xff0c;开启ssl…...

电子电路元件器介绍与选型——晶振

一、晶振 在我们使用嘉立创的时候&#xff0c;经常会看到晶振接到两个电容&#xff0c;这两个电容毫无疑问是滤波的&#xff0c;整个晶振其实就是一个振荡器&#xff0c;但这个振荡器会将其他频率给过滤掉&#xff0c;只保留一个频率也就是晶振的标称频率。当然上面讲的很明显是…...

【IEEE PDF eXpress】格式不对

目录 一、问题二、解决方法 一、问题 word的文档&#xff0c;用IEEE PDF eXpress网站生成pdf后&#xff0c;提交论文出现错误&#xff1a; Document validation failed due to the following errors: Content exceeds IEEE template margins for its format (Page 1:Bottom).…...

OpenAI全新多模态内容审核模型上线:基于 GPT-4o,可检测文本和图像

在数字时代&#xff0c;内容安全问题愈发受到重视。9月26日&#xff0c;OpenAI 正式推出了一款全新的多模态内容审核模型&#xff0c;名为 “omni-moderation-latest”。 该模型基于最新的 GPT-4o 技术&#xff0c;能够准确地识别检测有害文本图像。这一更新将为开发者提供强大…...

Visual Studio 字体与主题推荐

个人推荐&#xff0c;仅供参考&#xff1a; 主题&#xff1a;One Monokai VS Theme 链接&#xff1a;One Monokai VS Theme - Visual Studio Marketplacehttps://marketplace.visualstudio.com/items?itemNameazemoh.onemonokai 效果&#xff1a; 字体&#xff1a;JetBrain…...

信息学奥赛一本通 1416:【17NOIP普及组】棋盘 | 洛谷 P3956 [NOIP2017 普及组] 棋盘

【题目链接】 洛谷 P3956 [NOIP2017 普及组] 棋盘 ybt 1416&#xff1a;【17NOIP普及组】棋盘 【题目考点】 1. 深搜&#xff1a;深搜回溯 2. 深搜剪枝&#xff1a;最优化剪枝 【解题思路】 搜索从左上角到右下角的所有走法中花费金币最少的走法。 需要使用深搜回溯&…...

UE4完整教程 UE4简介 UE4学习攻略及文件格式

开头附上工作招聘面试必备问题噢~~包括综合面试题、无领导小组面试题资源文件免费!全文干货。 UE4简介学习攻略UE4Demo代码面试内容资源-CSDN文库https://download.csdn.net/download/m0_72216164/89825102 工作招聘无领导小组面试全攻略最常见面试题(第一部分)共有17章+可…...

JVM内存回收机制

目录 1.JVM运行时数据区 2.JVM类加载过程 3.双清委派模型 4.垃圾回收机制&#xff08;GC&#xff09; 找出谁是垃圾方案一&#xff1a;引用计数 找出谁是垃圾&#xff1a;方案二&#xff0c;可达性分析 释放垃圾的内存空间 判断垃圾&#xff1a;jvm依据对象的年龄对 对象…...

中国身份证号码校验

题目描述 第二届河南省最美教师评选开始了&#xff0c;每一位同学都可以投票选出你支持的人选&#xff0c;但是为了防止刷票&#xff0c;必须通过身份验证才可投票。负责投票平台后台的老大爷希望你能帮他验证身份证号的合法性&#xff0c;防止那些熊孩子随意刷票&#xff0c;…...

【Kubernetes】常见面试题汇总(五十四)

目录 120.创建 init C 容器后&#xff0c;其状态不正常&#xff1f; 特别说明&#xff1a; 题目 1-68 属于【Kubernetes】的常规概念题&#xff0c;即 “ 汇总&#xff08;一&#xff09;~&#xff08;二十二&#xff09;” 。 题目 69-113 属于【Kubernetes】的生产…...

Swagger和OpenApi的前世今生

Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章&#xff0c;二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑&#xff1a; &#x1f504; 一、起源与初创期&#xff1a;Swagger的诞生&#xff08;2010-2014&#xff09; 核心…...

基于Java Swing的电子通讯录设计与实现:附系统托盘功能代码详解

JAVASQL电子通讯录带系统托盘 一、系统概述 本电子通讯录系统采用Java Swing开发桌面应用&#xff0c;结合SQLite数据库实现联系人管理功能&#xff0c;并集成系统托盘功能提升用户体验。系统支持联系人的增删改查、分组管理、搜索过滤等功能&#xff0c;同时可以最小化到系统…...

作为测试我们应该关注redis哪些方面

1、功能测试 数据结构操作&#xff1a;验证字符串、列表、哈希、集合和有序的基本操作是否正确 持久化&#xff1a;测试aof和aof持久化机制&#xff0c;确保数据在开启后正确恢复。 事务&#xff1a;检查事务的原子性和回滚机制。 发布订阅&#xff1a;确保消息正确传递。 2、性…...

Unity UGUI Button事件流程

场景结构 测试代码 public class TestBtn : MonoBehaviour {void Start(){var btn GetComponent<Button>();btn.onClick.AddListener(OnClick);}private void OnClick(){Debug.Log("666");}}当添加事件时 // 实例化一个ButtonClickedEvent的事件 [Formerl…...

wpf在image控件上快速显示内存图像

wpf在image控件上快速显示内存图像https://www.cnblogs.com/haodafeng/p/10431387.html 如果你在寻找能够快速在image控件刷新大图像&#xff08;比如分辨率3000*3000的图像&#xff09;的办法&#xff0c;尤其是想把内存中的裸数据&#xff08;只有图像的数据&#xff0c;不包…...

LOOI机器人的技术实现解析:从手势识别到边缘检测

LOOI机器人作为一款创新的AI硬件产品&#xff0c;通过将智能手机转变为具有情感交互能力的桌面机器人&#xff0c;展示了前沿AI技术与传统硬件设计的完美结合。作为AI与玩具领域的专家&#xff0c;我将全面解析LOOI的技术实现架构&#xff0c;特别是其手势识别、物体识别和环境…...

Oracle11g安装包

Oracle 11g安装包 适用于windows系统&#xff0c;64位 下载路径 oracle 11g 安装包...

篇章二 论坛系统——系统设计

目录 2.系统设计 2.1 技术选型 2.2 设计数据库结构 2.2.1 数据库实体 1. 数据库设计 1.1 数据库名: forum db 1.2 表的设计 1.3 编写SQL 2.系统设计 2.1 技术选型 2.2 设计数据库结构 2.2.1 数据库实体 通过需求分析获得概念类并结合业务实现过程中的技术需要&#x…...

Java后端检查空条件查询

通过抛出运行异常&#xff1a;throw new RuntimeException("请输入查询条件&#xff01;");BranchWarehouseServiceImpl.java // 查询试剂交易&#xff08;入库/出库&#xff09;记录Overridepublic List<BranchWarehouseTransactions> queryForReagent(Branch…...

用神经网络读懂你的“心情”:揭秘情绪识别系统背后的AI魔法

用神经网络读懂你的“心情”:揭秘情绪识别系统背后的AI魔法 大家好,我是Echo_Wish。最近刷短视频、看直播,有没有发现,越来越多的应用都开始“懂你”了——它们能感知你的情绪,推荐更合适的内容,甚至帮客服识别用户情绪,提升服务体验。这背后,神经网络在悄悄发力,撑起…...