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;

            }

          }

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

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

相关文章

Tomcat的概念及部署

文章目录 一.Tomcat的概述1.Tomcat介绍2.Tomcat 的主要特点 二.Tomcat的核心组件1.核心组件关系图2.核心组件的介绍2.1 Web容器2.2 servlet容器2.3 JSP容器2.4 Tomcat核心组件的请求方式&#xff08;交互方式&#xff09;2.4.1 Web容器2.4.2 JSP容器2.4.3 serverlet容器 2.5 To…

短视频矩阵-短视频seo源码开发搭建

开发场景&#xff1a;抖音seo&#xff0c;短视频seo&#xff0c;抖音矩阵&#xff0c;短视频矩阵源码开源 一、 短视频矩阵源码需要掌握以下技术&#xff1a; 1. 视频编码技术 短视频矩阵系统利用视频编码技术&#xff0c;将视频文件进行压缩和解压缩&#xff0c;实现了高质…

华为战略方法论:BLM模型之差距分析(限制版)

目录 说明 差距类型 1、业绩差距 2、机会差距 3、对标差距 专栏列表 个人简介 说明 今天就来谈谈 BLM 模型中的第一把钥匙&#xff0c;也就是差距分析。 从本质上来看。 BLM 模型中的差距与你在日常生活中听到或用到的差距在意义都是一样的。 不同之处就在于问题的复…

高级第二个月复习

1.route与router的区别 $route&#xff1a;获取路由信息 指当前路由实例跳转到的路由对象 包括&#xff1a; $route.path 字符串&#xff0c;等于当前路由对象的路径&#xff0c;会被解析为绝对路径&#xff0c;如/home/ews $route.name 当前路由的名字&#xff0c;如果没有使…

探索 Spring Boot 项目全过程

文章目录 &#x1f387;前言1.Spring Boot 所需环境2.Spring Boot 项目创建2.1 安装插件2.2 创建新项目2.3 项目属性配置2.4添加依赖2.4 修改项目名称2.5 添加框架支持2.6 目录介绍 3.判断Spring Boot 创建项目是否成功&#x1f386;总结 &#x1f387;前言 在 Java 这个圈子&…

基于Scrcpy的Android手机屏幕投影到电脑教程

基于Scrcpy的Android手机屏幕投影到电脑教程 文章目录 基于Scrcpy的Android手机屏幕投影到电脑教程一&#xff0c;前言二&#xff0c;具体步骤1.软件下载2.环境配置 三&#xff0c;基于Scrcpy的手机投屏教程1.基于Scrcpy的有线手机投屏2.无线投屏 一&#xff0c;前言 在执行某…

eclipse编辑器汉化;eclipse安装中文插件

eclipse IDE默认是英文环境&#xff0c;使用起来略微不便&#xff0c;汉化还是很有必要的&#xff1b;下面记录一下安装中文插件的过程: 文章目录 一、 选择安装包地址二、 在eclipse安装中文插件2.1 在线安装2.2 手动下载安装包2.3 导入到eclipse 三、汉化插件介绍 一、 选择安…

JAVA 正则表达式 及 案例

JAVA 正则表达式 及 案例 目录 JAVA 正则表达式 及 案例1.正则表达式Regex1.1 概述1.2 常见语法1.3 String提供了支持正则表达式的方法1.4 练习&#xff1a;测试输入身份证号 1.正则表达式Regex 1.1 概述 正确的字符串格式规则。 常用来判断用户输入的内容是否符合格式的要求…

【深度学习】6-1 卷积神经网络 - 卷积层

卷积神经网络(Convolutional Neural Network&#xff0c;CNN)。 CNN 被用于图像识别、语音识别等各种场合&#xff0c;在图像识别的比赛中&#xff0c;基于深度学习的方法几乎都以 CNN 为基础。 首先&#xff0c;来看一下 CNN 的网络结构&#xff0c;了解 CNN 的大致框架。CNN…

亚马逊实践 | 构建可持续发展的架构模型

可持续发展概念源于对系统性文明危机和世界问题的科学和社会意识形态研究。世界级的进步学术社群和政治精英在二十世纪末就认识到了这些问题的存在。他们将即将到来的二十一世纪视为充满不确定性、全球灾难进程逐步升级的时代。可持续发展对多个领域产生影响&#xff0c;目前已…

【计算机网络】数据链路层--MAC媒体接入控制

1.概念 2.静态划分信道 2.1 频分复用 2.2 时分复用 2.3 波分复用 2.2 码分复用 2.3 习题1 2.4 应用举例 2.5 习题2 2.6 习题3 3.小结

adb 查询app占用的cup和内存

一、先将cpu定频 先进入shell 模式 adb shell 查看当前CPU的工作模式 cat /sys/devices/system/cpu/cpu*/cpufreq/scaling_governor 然后把CPU工作模式设置为performance模式 echo performance > /sys/devices/system/cpu/cpu0/cpufreq/scaling_governor 改完后查看模式…