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

news2024/9/29 3:34:13

<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;

            }

          }

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

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

相关文章

Web服务器群集:Nginx之Rewrite重写

目录 一、理论 1.Nginx正则表达式 2.location匹配 3.rewrite重写 二、实验 1.基于域名的跳转 2.基于客户端 IP访问跳转 3.基于旧域名跳转到新域名后面加目录 4.基于参数匹配的跳转 5.基于目录下所有 php结尾的文件跳转 6.基于最普通一条url请求的跳转 三、总结 一、…

福昕Foxit PDF远程代码执行漏洞CVE-2023-27363分析与复现

漏洞概述 福建福昕软件开发股份有限公司是一家国际化运营的PDF电子文档解决方案提供厂商&#xff0c;提供文档的生成、转换、显示、编辑、搜索、打印、存储、签章、表单、保护、安全分发管理等涵盖文档生命周期的产品技术与解决方案。其下产品Foxit PDF Reader和Foxit PDF Edit…

性能测试——App性能测试需要关注的指标

目录 一、Android客户端性能测试常见指标&#xff1a; 二、预期标准指定原则 三、测试方法及工具 一.从用户角度出发 二.站在管理员的角度考虑需要关注的性能点 三.站在开发(设计)人员角度去考虑 四.站在测试工程师角度考虑 总结&#xff1a; 一、Android客户端性能测试…

无功功率补偿及电容器的简单介绍 安科瑞 许敏

摘要&#xff1a;主要对无功功率的概念、电容器的补偿方式、补偿容量的计算等方面进行了阐述&#xff0c;在此基础上介绍了电容器运行的注意事项。 关键词&#xff1a;电力电容器&#xff1b;补偿方式 &#xff1b;运行 0 引言 笔者从进入吕合煤业从事电工工作的那天起&#…

Wav2Lip原理以及训练

原理 1: 音视频同步判别器 常规SyncNet&#xff1a; 功能&#xff1a;音频和嘴唇同步 实质&#xff1a;判断音频和唇形在某个共同参数空间下的相似性。 网络结构&#xff1a; 一种伪孪生网络结构&#xff0c;分别提取嘴形特征和音频特征&#xff0c;然后通过对比损失计算两者…

VS2017+OpenCV4.5.1 安装与配置,扩展模块opencv_contrib的安装与配置

文章目录 VS2017OpenCV4.5.1 安装与配置&#xff0c;扩展模块opencv_contrib的安装与配置1、OpenCV下载&#xff1a;&#xff08;1&#xff09;下载地址&#xff1a;https://opencv.org/releases/page&#xff08;2&#xff09;解压到指定文件夹&#xff1a; 2、配置环境&#…

如何进行可视化的数据过滤?Sugar BI 的过滤组件教你快速实现

Sugar BI 中支持了 10种过滤组件&#xff0c;这些过滤组件都是让用户在浏览报表或大屏的时候&#xff0c;能够交互式的对页面上的图表进行数据的过滤。所有过滤组件对图表的数据过滤设置都是一样的&#xff0c;如下&#xff1a; 例如页面中已有两个图表&#xff08;这两个图表…

人脑髓鞘化

髓鞘化 大纲&#xff1a;髓鞘化定义&#xff1b;髓鞘化能用来干嘛&#xff1b;髓鞘化现阶段存在的痛点&#xff1b;现有方法如何解决问题&#xff1b;我们方法的优势。 定义 髓鞘化是指髓鞘发展的过程&#xff0c;它使神经兴奋在沿神经纤维传导时速度加快&#xff0c;并保证…

开窗函数分享

开窗函数定义 开窗函数&#xff1a;用于为行定义一个窗口&#xff0c;它一组值进行操作&#xff0c;不需要使用group by子句对数据进行分组&#xff0c;能够在同一行中同时返回基础行的列和聚合列。 划重点!!! 开窗函数返回&#xff1a;基础行列、聚合列 下面通过例子看一下…

OJ# 376 机器翻译

题目描述 ​ 小李的电脑上安装了一个机器翻译软件&#xff0c;他经常用这个软件来翻译英语文章。 ​这个翻译软件的原理很简单&#xff0c;它只是从头到尾&#xff0c;依次将每个英文单词用对应的中文含义来替换。对于每个英文单词&#xff0c;软件会先在内存中查找这个单词的…

简单易用多git服务器ssh密钥配置管理

文章目录 前言一、什么是ssh-key二、配置步骤添加ssh-key配置多ssh-key 总结 前言 快速理解如何配置管理多个git服务器的ssh&#xff0c;当我们有多个git帐号时会涉及如何管理不同的remote使用不同的git账户登陆推送 当前repo的origin remote是github&#xff0c;我们在推送时…

EMMC基础知识总结

1、说明 1.0 整体架构 ‘ EMMC最简单的可理解为带有控制器的FLASH&#xff0c;具体结构如下&#xff1a; EMMC&#xff1a; Embedded multiMediaCard EMMC. EMMC内部&#xff1a; host interface 、 flash controller 、 flash memory 1.1 flash memory 结构 EMMC 中一般…

学习Vue3——watchEffect(高级侦听器)

立即运行一个函数&#xff0c;同时响应式地追踪其依赖&#xff0c;并在依赖更改时重新执行。 watchEffect有两个参数 第一个参数就是要运行的副作用函数 第二个参数是一个可选的选项&#xff0c;可以用来调整副作用的刷新时机或调试副作用的依赖 API—watchEffect 基本用法 …

电脑必备,推荐几款好用的程序软件,让你工作更加高效

在当今的信息化时代&#xff0c;电脑已成为我们日常生活中必不可少的工具。而在电脑上安装一些好用的程序软件&#xff0c;能够大大提高我们的工作效率和体验。但是市面上的软件五花八门&#xff0c;要如何选择呢&#xff1f;下面将为大家推荐几款值得使用的程序软件&#xff0…

告别脚本小子系列丨JAVA安全(8)——反序列化利用链(下)

0x01 前言 在前面的文章中介绍了基于CC链的反序列化利用方式&#xff0c;并且通过最终调用Runtime类的exec方法达到命令执行的效果。在CC链中还可以通过xalan来执行命令。 xalan是java操作xml的库&#xff0c;属于java内置的官方库之一&#xff0c;在CC链中主要用到的是com.sun…

论文研读|TNNLS 期刊近三年对话生成工作介绍(2篇)

前言&#xff1a;本篇博客记录TNNLS期刊近三年的对话生成相关工作中本人比较感兴趣的两篇工作。首先给大家分享一下论文精确查找的方式&#xff0c;然后对两篇工作的主要思想进行简要介绍。 目录 1. 论文精确查找方法2. 论文简介2.1 面向用户个性保持与回复多样性的两阶段对话生…

错误:No module named ‘osgeo’

from osgeo import gdal 报错&#xff1a;No module named ‘osgeo’ pip install gdal 会出错&#xff0c;也不知道什么原因。 解决方案&#xff1a; 下载whl,然后pip install .whl即可。 详细步骤如下&#xff1a; whl下载地址&#xff1a;https://www.lfd.uci.edu/~go…

基于java+servlet+mysql-图书商城

基于javaservletmysql-图书商城 一、系统介绍二、功能展示1.项目骨架2.首页3.图书详情4.我的订单5.我的购物车6、注册7、登录8、图书管理9、订单管理 四、其它1.其他系统实现五.获取源码 一、系统介绍 项目类型&#xff1a;Java web项目 项目名称&#xff1a;基于javaservlet…

浅谈企业能源监测管理系统的设计与应用

安科瑞 华楠 摘要: 针对企业目前能源监测现状, 结合企业信息化建设情况和发展需要, 介绍了能源监测管理信息系统, 提出了企业能源监测管理系统建设建议。 关键词:管理系统; 能源监测; 企业信息化 0 引言 节能降耗是缓解中国资源约束的根本出路, 也是提高企业自主创新能力的…

【机器学习】如何选择合适的假设函数

在前面的线性回归中&#xff0c;我们可以使用不同次数的多项式对数据集进行拟合&#xff0c;但是选择次数过低的多项式会导致欠拟合&#xff0c;选用次数过多的多项式会过拟合&#xff0c;那么如何选择合适的多项式呢&#xff1f;这就是本文需要解决的问题。 想要了解自己训练…