css 背景颜色级别高于背景图

<div class="bg-parent">

                    <img :src="employeeImg" class="bg-url" />

                    <div class="bg">

                      <el-icon class="plus-icon">

                        <Plus />

                      </el-icon>

                    </div>

                  </div>

 

.bg-parent{ //父级别

            position: absolute;

          }

          .bg-url{ //子级别

            width: 312px;

            height: 152px;

            border-radius: 8px;

            position: absolute;

          }

          .bg{ 子级别

            width: 312px;

            height: 152px;

            border-radius: 8px;

            position: absolute;

            z-index:1;

          }

          .plus-icon{

            top: 50%;

            left: 50%;

            transform: translate(-50%, -50%);

            display: none; //背景图默认没有加号

          }

          .bg:hover {  //鼠标移动上去添加背景加号

            background-color: rgba(0, 0, 0, 0.4);

            .plus-icon { //鼠标移动上去添加背景加号

              display: block;

            }

          }

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

python3套接字编程之socket和socketserver(TCP和UDP通信)

socket和socketserver是python3中socket通信模块&#xff0c;关于其使用做如下总结。 目录 1.socket 1.1模块引入 1.2套接字获取 1.3套接字接口 1.3.1 服务端 1.3.2 客户端套接字函数 1.3.3 公共套接字函数 1.3.4 面向锁的套接字方法 1.3.5 面向文件的套接字的函数 …

CNN卷积类型总结(标准卷积、空洞卷积、反卷积、深度可分离卷积、分组卷积等)

目录 标准卷积 卷积的运算 conv2d conv1d 其他卷积类型 空洞卷积&#xff08;膨胀卷积&#xff09; 反卷积&#xff08;转置卷积&#xff09; 深度可分离卷积 分组卷积 参考文章 上学时&#xff0c;卷积常在各个课程中出现&#xff0c;现代、信号与系统这些&#xff…

【MySQL】SQL的高阶用法

文章目录 条件查询使用关系运算符查询使用IN关键字查询使用BETWEEN AND关键字查询使用空值查询使用AND关键字查询使用OR关键字查询使用LIKE关键字查询(模糊查询)使用LIMIT分页查询使用GROUP BY进行分组查询GROUP BY和聚合函数一起使用GROUP BY和聚合函数以及HAVING一起使用 使用…

热点探测技术架构设计与实践

1. 概述 说到热点问题&#xff0c;首先我们先理解一下什么是热点&#xff1f; 热点通常意义来说&#xff0c;是指在一段时间内&#xff0c;被广泛关注的物品或事件&#xff0c;例如微博热搜&#xff0c;热卖商品&#xff0c;热点新闻&#xff0c;明星直播等等&#xff0c;所以…

2-css-2

一 复合选择器 定义&#xff1a;由两个或多个基础选择器&#xff0c;通过不同的方式组合而成。 作用&#xff1a;更准确、更高效的选择目标元素&#xff08;标签&#xff09;。 1 后代选择器 后代选择器&#xff1a;选中某元素的后代元素。 选择器写法&#xff1a;父选择器…

【微信小程序开发】第 7 课 - 小程序的常用组件

欢迎来到博主 Apeiron 的博客&#xff0c;祝您旅程愉快 &#xff01; 时止则止&#xff0c;时行则行。动静不失其时&#xff0c;其道光明。 目录 1、缘起 2、小程序中组件的分类 3、常用的视图容器类组件 3.1、view 组件 3.2、scroll - view 组件 3.3、swiper 和 swiper…

OpenAI 重磅更新 变得更强啦 | 包括更多可控的 API 模型、函数调用能力、更长的上下文和更低的价格

文章目录 一、前言二、主要内容三、总结 &#x1f349; CSDN 叶庭云&#xff1a;https://yetingyun.blog.csdn.net/ 一、前言 OpenAI 官网&#xff1a;https://openai.com/blog/function-calling-and-other-api-updates 功能调用和其他 API 更新。OpenAI 宣布更新&#xff0c;包…

哈工大计算机网络课程网络层协议详解之:互联网控制报文协议(ICMP)

哈工大计算机网络课程网络层协议详解之&#xff1a;互联网控制报文协议&#xff08;ICMP&#xff09; 在互联网中&#xff0c;IP数据报的传输很容易出现差错&#xff0c;当出现差错时&#xff0c;最简单的处理办法就是对该IP数据报进行丢弃。但是&#xff0c;并不是直接丢弃就…

Linux 学习记录40(C++篇)

Linux 学习记录40(C/QT篇) 本文目录 Linux 学习记录40(C/QT篇)一、QT软件的使用1. 新建工程 二、C语言和C的区别1. C对C的扩充2. C对C的兼容 三、第一个C程序1. cout标准输出流对象(1.介绍&#xff1a;(2. 运算符(3. cout的使用 2. cin标准输出流对象(1.介绍&#xff1a;(3. ci…

TCP/IP详解(一)

TCP/IP协议是Internet互联网最基本的协议&#xff0c;其在一定程度上参考了七层OSI&#xff08;Open System Interconnect&#xff0c;即开放式系统互联&#xff09;模型 OSI参考模型是国际组织ISO在1985年发布的网络互联模型&#xff0c;目的是为了让所有公司使用统一的规范来…

序列化和反序列化的认识【protobuf、json、xml】

1. 什么是序列化与反序列化&#xff1f; 程序员在编写应用程序的时候往往需要将程序的某些数据存储在连续的内存中&#xff0c;然后将其写入文件或是将其传输到网络中的另一台计算机上以实现通讯。这个将程序数据转换成能被存储并传输的格式的过程被称为序列化&#xff08;seri…

web存储(Storage)

目录 1、基本概念 2、功能监测 2.1 测试可用性 2、W3C标准 3、基本方法或属性 4、 Local Storage 4.1 描述 4.2 示例 5、sessionStorage 5.1 描述 5.2 示例 6、StorageEvent&#xff08;存储事件&#xff09; 6.1 构造函数 6.2 实例属性 6.3 实例方法 6.4 响应…

【spring源码系列-04】注解方式启动spring时refresh的前置工作

Spring源码系列整体栏目 内容链接地址【一】spring源码整体概述https://blog.csdn.net/zhenghuishengq/article/details/130940885【二】通过refresh方法剖析IOC的整体流程https://blog.csdn.net/zhenghuishengq/article/details/131003428【三】xml配置文件启动spring时refres…

团体程序设计天梯赛-练习集L2篇⑨

&#x1f680;欢迎来到本文&#x1f680; &#x1f349;个人简介&#xff1a;Hello大家好呀&#xff0c;我是陈童学&#xff0c;一个与你一样正在慢慢前行的普通人。 &#x1f3c0;个人主页&#xff1a;陈童学哦CSDN &#x1f4a1;所属专栏&#xff1a;PTA &#x1f381;希望各…

线性代数高级--矩阵的秩--SVD分解定义--SVD分解的应用

目录 矩阵的秩 概念 k阶子式 矩阵的秩的定义 矩阵的秩的性质 SVD分解 概念 注意 SVD的分解过程 SVD分解的应用 矩阵的秩 概念 矩阵的秩是线性代数中的一个重要概念&#xff0c;用于描述矩阵的行&#xff08;或列&#xff09;向量的线性无关程度。矩阵的秩可以通过…

Spring Data JPA 报 HOUR_OF_DAY: 0 -> 1异常的解决过程和方案

在进行数据查询时&#xff0c;控制台报了Caused by: com.mysql.cj.exceptions.WrongArgumentException: HOUR_OF_DAY: 0 -> 1异常&#xff0c;查询得知&#xff1a;这是由于查mysql库&#xff0c;转换类型为datetime类型的字段引起的。 网上的解决方案有多种&#xff0c;大…

fastadmin如何自定义一个列表上的按钮。

参考文档&#xff1a; 首先&#xff0c;这是没有新增按钮的&#xff0c;只有删除和编辑。 然后js按钮是这一块&#xff1a; 我现在呢想加上一个撤销的按钮怎么办呢&#xff0c;只需要在js加上这一串代码就行了。 {field: "operate",title: __("Operate")…

uni-app 使用axios发请求 运行到微信开发者工具报错 Adapter “http‘ is not available in the build

场景 最近在使用uni-app开发H5移动端&#xff0c;跟往常一样使用axios发请求&#xff0c;做一些全局的请求拦截响应拦截操作 uni-app数据存储&#xff0c;uni-ui组件开发&#xff0c;配置axios&#xff0c;vuex。配置了vue.config.js文件做跨域操作 运行到谷歌浏览器一切正常…

HBase(8):扫描操作

1 需求 查看ORDER_INFO表中所有的数据 1.2 scan命令 在HBase,我们可以使用scan命令来扫描HBase中的表。语法: scan 表名 1.3 扫描ORDER_INFO表 scan ORDER_INFO,{FORMATTER => toString} 注意:要避免scan一张大表! 2 需求二:查询订单数据(只显示3条) scan ORDE…

从0开始,精通Go语言Rest微服务架构和开发

说在前面 现在拿到offer超级难&#xff0c;甚至连面试电话&#xff0c;一个都搞不到。 尼恩的技术社区中&#xff08;50&#xff09;&#xff0c;很多小伙伴凭借 “左手云原生右手大数据”的绝活&#xff0c;拿到了offer&#xff0c;并且是非常优质的offer&#xff0c;据说年…