css实现鼠标移入背景图片变灰并浮现文字的效果

首先上效果图

请添加图片描述

说明一下我的html结构

在这里插入图片描述
如上图是一个div包裹的img标签, div的块大小width, height 自己定义, 我说明一下核心样式代码

下面写法是scss, 请自行替换

  .web-query-image {position: relative; // 相对定位, 方便浮现文案进行绝对定位border-radius: 8px;box-sizing: border-box;> img {&:hover {filter: brightness(0.4); // 图片变暗,要不然浮现的文字看不清}}&:hover {border: 2px solid #0080FF;border-radius: 8px;backdrop-filter: blur(10px); // 图片添加模糊度&:after {font-size: 12px;pointer-events: none; // 方式用户鼠标浮在文案上时丢失父元素的hover效果color: #FFFFFF;content: 'Ctrl+V 粘贴替换';position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);white-space: nowrap;}}}

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

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

相关文章

论文阅读——DDeP(cvpr2023)

分割标签耗时且贵,所以常常使用预训练提高分割模型标签有效性,反正就是,需要一个预训练分割模型。典型的分割模型encoder部分通过分类任务预训练,decoder部分参数随机初始化。作者认为这个方法次优,尤其标签比较少的情…

Kettle连接到GBase 8s数据库

1,将GBase 8s数据库驱动放到kettle的lib目录下 如下图,在data-integration\lib下添加连接GBase 8s数据库的驱动gbasedbtjdbc.jar(视Server版本,增加匹配的驱动) 2,在 文件 -> 新建 -> 数据库连接 或者是在 转换 -> D…

探索容灾架构演进之路,从单点到异地多活

1. 挑战与变革 在公司发展初期,业务发展和用户增长是首要关注的焦点。然而,随着业务规模不断扩大,用户数量逐渐攀升,应用稳定性的重要性也变得愈发凸显。在这个演进过程中,传统架构下的应用部署模式开始显露出多方面的…

【Java】IDEA 基本操作

0.IDEA 0.1 IDEA中的层级结构 0.1.1 结构分类 project(项目、工程)module(模块)package(包)class(类) 0.1.2 结构介绍 project(项目、工程) ​ 淘宝、京…

JS:获取当前日期是本年度的第几周

问题 根据当前的日期(比如年月日),来得到当前日期属于本年度的第几周 解决 代码: // 获取当前日期是本年的第几周 //参数: a为年 b为月 c为日 function getYearWeek(a, b, c) {var date1 new Date(a, parseInt(b)…

【Axure高保真原型】3D金字塔图_移入显示数据标签

今天和大家分享3D金字塔图_移入显示数据标签的原型模板,鼠标金字塔区域时,对应区域会变绿,可以查看该区域对应的项目和数据,这个原型模板是用Axure原生元件制作的,所以无需联网,而且可以自由修改样式、交互…

百度智能小程序系统源码+关键词排名优化 附带完整的搭建教程

百度智能小程序系统的开发背景是基于百度强大的技术实力和对用户需求的深入理解。在移动互联网时代,用户对便捷、高效、智能的服务需求越来越高。而小程序作为一种轻量级的应用程序,恰好能够满足用户的这些需求。然而,开发一个小程序需要掌握…

Kafka 如何实现顺序消息

版本说明 本文所有的讨论均在如下版本进行,其他版本可能会有所不同。 Kafka: 3.6.0Pulsar: 2.9.0RabbitMQ 3.7.8RocketMQ 5.0Go1.21github.com/segmentio/kafka-go v0.4.45 结论先行 Kafka 只能保证单一分区内的顺序消息,无法保证多分区间的顺序消息…

uniapp挽留提示2.0

项目需求:有时候挽留的ui是全屏的,用page-container也可以。后来产品提了个问题,手机侧滑的时候没那么顺畅(就是一用侧滑,就显示出来,产品要的方案是如下图,emmm大概是这个意思) 后面…

Python入门04字符串

目录 1 字符串的定义2 转义字符3 字符串的常见方法4 分割字符串5 字符串反转6 字符串的链式调用7 格式化字符串8 多行字符串总结 1 字符串的定义 在Python中,字符串表示一个字符的序列,比如 str "hello,world"这里我们定义了一个字符串&…

java选择排序和冒泡排序

1.区别 选择排序和冒泡排序的区别主要在于算法逻辑、稳定性和交换成本。 算法逻辑:选择排序和冒泡排序都属于比较排序,但在具体算法逻辑上有所不同。冒泡排序是通过相邻元素之间的比较和交换,将较大(或较小)的元素逐…

一文从Vue2过渡到Vue3

文章目录 Vue3简介创建Vue3.0工程使用 vue-cli 创建使用 vite 创建Vue3工程结构变化 常用 Composition API拉开序幕的setupref函数reactive函数Vue3.0中的响应式原理vue2.x的响应式Vue3.0的响应式 reactive对比refsetup的两个注意点计算属性与监视computed函数watch函数watchEf…

Pytorch中的gather的理解和用法

Pytorch中的gather的理解和用法 这个Gather的用法花费了点时间,我相信很多人一开始不太懂。 跟着我简单理解。 首先样例是: tensor([[ 3, 4, 5],[ 6, 7, 8],[ 9, 10, 11]])然后index: [[2, 1, 0]]然后执行的代码: tensor_0.gather(0…

享受更健康的睡眠,dido P1S智能手环体验

如今很多人都有严重的失眠困扰,像是因为平时工作非常繁忙,每天回到家后已经很晚了,或者是睡前长时间刷手机,躺在床上辗转反侧,晚上就很难入睡,脑海中一片混乱,休息的质量就很差。我最近尝试了一…

人工智能关键技术决定机器人产业的前途

人工智能(Artificial Intelligence,AI)是指让计算机或机器具有类似于人类的智能和学习能力的技术。人工智能技术与机器人技术的结合将改变传统的机器人行业格局,就像智能手机对传统手机的颠覆一样。本文从人工智能技术的发展趋势、…

ASIWebPage数据库抓取代码示例

objective-c #import "ASIWebPageRequest.h" int main(int argc, const char * argv[]) { autoreleasepool { // 创建并设置 NSURL *代理URL [NSURL URLWithString:""]; ASIHTTPRequest *request [ASIHTTPRequest requestW…

jsoup登录日志平台后调企业微信机器人自动发送错误日志告警

一、需求:错误日志Top10告警发送 二、需求分解 jsoup实现登录,获取到cookie和token等用户鉴权信息获取接口相应的key值调用日志平台错误日志Top榜接口,查询到结果集调用企业微信机器人发送消息接口加上定时任务,可以实现定时发送…

java多线程-扩展知识二:线程的生命周期

1、生命周期 生命周期有广义与狭义之分,狭义为生命科学术语,指包括人类在内的一切动物由出生到死亡经历的生命全程。广义的生命周期泛指自然界与人类社会各种客观事物的阶段性变化及规律,如家庭生命周期、产品生命周期等。本义即狭义的生命周…

任务管理器怎么打开?4个方法快速打开!

“我想进入电脑任务管理器中对某些应用进行设置,但是我不知道应该怎么进入任务管理器中。有什么方法可以快速进入任务管理器吗?” 任务管理器是Windows操作系统中一个强大的工具,可以让你监控和管理计算机上运行的进程、应用程序和性能。当我…

FLASK博客系列5——模板之从天而降

我们啰啰嗦嗦讲了4篇&#xff0c;都是在调接口&#xff0c;啥时候能看到漂亮的页面呢&#xff1f;别急&#xff0c;今天我们就来实现。 来我们先来实现一个简单的页面。不多说&#xff0c;上代码。 app.route(/) def index():user {username: clannadhh}return <html>&…