TAB标签美化 - SVG作为mask

今天觉得V3的标签不是很好看,忽然想起来之前看过Vue Admin Beautiful Pro的样式挺好的,顺手研究了一把。发现Vue Admin Beautiful是采用PNG+mask css来解决的。于是乎打算把V3的标签页做点小美化,但是迁移过程发生些小插曲,在此记录一下。

1)像素化变形问题

VABPro采用的是PNG作为背景,这个图片

之前没用过mask的css,看了下mask说明,是将黑色的部分作为混合颜色的保留部位,透明作为穿透部分。而为了保证铺满TAB的背景,使用了mask-size这个属性进行了拉伸。

由于PNG本身不是矢量,拉伸后出现了变形,边界模糊的问题,效果不好(忘截图片了)。于是想起来用SVG来做背景,打开AI描摹再修改了下,得到了SVG。

2)SVG无法拉伸的问题

仿照VABPro的方式,将SVG编码为BASE64,发现能够显示,但是无法拉伸变形。本以为该问题无解,找遍google快放弃的时候,忽然有人提到了在svg添加preserveAspectRatio="none"放弃比例限制。试了下,还真可以,于是乎得到了这个SVG数据:

<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 191 34"><path d="M0,34c7.37-2,9-4,9-11.36,0-4.15-.06-8.3,0-12.45C9,5.64,13.49,0,21,0H170c7.45,0,12.13,5.77,12.06,10.59-.06,3.82-.07,7.66-.06,11.49,0,8,1.24,9.65,9,11.92"/></svg>

BASE64编码后,真的能够拉伸了,这下比PNG看起来舒服多了,顺便把VAB的比例重新调了一下。

3)改编v3-admin-vite的tab头部,修改下TagsView/index.vue里的样式部分:

<style lang="scss" scoped>
.tags-view-container {height: var(--v3-tagsview-height);width: 100%;background-color: var(--v3-header-bg-color);box-shadow: 0 0 3px 0 #00000010;.tags-view-wrapper {.tags-view-item {display: inline-block;position: relative;cursor: pointer;height: 26px;line-height: 26px;//border: 1px solid var(--v3-tagsview-tag-border-color);//border-radius: var(--v3-tagsview-tag-border-radius);color: var(--v3-tagsview-tag-text-color);background-color: var(--v3-tagsview-tag-bg-color);padding: 0 20px; // Edit by Jimfont-size: 12px;// margin-left: 5px;// margin-top: 4px;&:first-of-type {margin-left: 5px;}&:last-of-type {margin-right: 5px;}height: 34px;line-height: 34px;&.active {background-color: var(--v3-tagsview-tag-active-bg-color);color: var(--v3-tagsview-tag-active-text-color);// ---- add by Jim ----mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIHZpZXdCb3g9IjAgMCAxOTEgMzQiPjxwYXRoIGQ9Ik0wLDM0YzcuMzctMiw5LTQsOS0xMS4zNiwwLTQuMTUtLjA2LTguMywwLTEyLjQ1QzksNS42NCwxMy40OSwwLDIxLDBIMTcwYzcuNDUsMCwxMi4xMyw1Ljc3LDEyLjA2LDEwLjU5LS4wNiwzLjgyLS4wNyw3LjY2LS4wNiwxMS40OSwwLDgsMS4yNCw5LjY1LDksMTEuOTIiLz48L3N2Zz4=);-webkit-mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIHZpZXdCb3g9IjAgMCAxOTEgMzQiPjxwYXRoIGQ9Ik0wLDM0YzcuMzctMiw5LTQsOS0xMS4zNiwwLTQuMTUtLjA2LTguMywwLTEyLjQ1QzksNS42NCwxMy40OSwwLDIxLDBIMTcwYzcuNDUsMCwxMi4xMyw1Ljc3LDEyLjA2LDEwLjU5LS4wNiwzLjgyLS4wNyw3LjY2LS4wNiwxMS40OSwwLDgsMS4yNCw5LjY1LDksMTEuOTIiLz48L3N2Zz4=);mask-size: 100% 100%;-webkit-mask-size: 100% 100%;z-index: 1;&::before {content: '';background-color: var(--v3-tagsview-tag-active-before-color);display: inline-block;width: 8px;height: 8px;border-radius: 50%;position: relative;margin-right: 5px; // Modified by Jim}}&:not(.active) {// add by Jimbackground-color: var(--el-menu-border-color) !important;border-top-left-radius: 3px;border-top-right-radius: 3px;border-left: none;border-right: none;margin: 0 -10px;opacity: 0.95;}.el-icon {margin: 0 2px;vertical-align: middle;border-radius: 50%;&:hover {background-color: var(--v3-tagsview-tag-icon-hover-bg-color);color: var(--v3-tagsview-tag-icon-hover-color);}}}}.contextmenu {margin: 0;background-color: #fff;z-index: 3000;position: absolute;list-style-type: none;padding: 5px 0;border-radius: 4px;font-size: 12px;font-weight: 400;color: #333;box-shadow: 2px 2px 3px 0 #00000030;li {margin: 0;padding: 7px 16px;cursor: pointer;&:hover {background-color: #eee;}}}
}
</style>

看了下,效果不错。在Chrome、Firefox、Edge下能很好兼容,IE11就免了,连登录都进不去:

在默认主题下工作良好

黑色可能要稍微调整一下

在深蓝主题下,由于默认背景色半透明,问题稍多一点

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

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

相关文章

【算法】动态规划练习(一)

目录 1137. 第 N 个泰波那契数 分析 代码 面试题 08.01. 三步问题 分析 代码 746. 使用最小花费爬楼梯 分析 代码 泰波那契序列 Tn 定义如下&#xff1a; T0 0, T1 1, T2 1, 且在 n > 0 的条件下 Tn3 Tn Tn1 Tn2 给你整数 n&#xff0c;请返回第 n 个泰波…

计算机网络——34LANs

LANs MAC地址和ARP 32bit IP地址 网络层地址用于使数据到达目标IP子网&#xff1a;前n - 1跳从而到达子网中的目标节点&#xff1a;最后一跳 LAN&#xff08;MAC/物理/以太网&#xff09;地址&#xff1a; 用于使帧从一个网卡传递到与其物理连接的另一个网卡&#xff08;在同…

数位排序(Comparator<int[]>())

题目 import java.util.Arrays; import java.util.Comparator; import java.util.Scanner;public class Main {public static void main(String[] args) {Scanner sc new Scanner(System.in);int n sc.nextInt();int m sc.nextInt();int[][] a new int[n][2];for(int i0;i…

C语言进阶课程学习记录-第25课 - # 和 ## 操作符使用分析

C语言进阶课程学习记录-第25课 - # 和 ## 操作符使用分析 #运算符实验-#转化字符串预处理后代码 实验-#输出函数名预处理后的代码 ##运算符实验-##定义变量预处理后代码 实验-##定义结构体预处理后的代码 小结 本文学习自狄泰软件学院 唐佐林老师的 C语言进阶课程&#xff0c;图…

libVLC 音频输出设备切换

libvlc_audio_output_list_get和libvlc_audio_output_device_list_get是libVLC 库中用于处理音频输出的两个函数。 libvlc_audio_output_list_get函数用于获取可用的音频输出模块列表。这个列表通常包括不同的音频输出方式&#xff0c;例如 Pulseaudio、ALSA 等。通过这个函数…

算法第三十九天-验证二叉树的前序序列化

验证二叉树的前序序列化 题目要求 解题思路 方法一&#xff1a;栈 栈的思路是「自底向上」的想法。下面要结合本题是「前序遍历」这个重要特点。 我们知道「前序遍历」是按照「根节点-左子树-右子树」的顺序遍历的&#xff0c;只有当根节点的所有左子树遍历完成之后&#xf…

使用 Docker 部署 Photopea 在线 PS 工具

1&#xff09;Photopea 介绍 GitHub&#xff1a;https://github.com/photopea/photopea 官方手册&#xff1a;https://www.photopea.com/learn/ Adobe 出品的「PhotoShop」想必大家都很熟悉啦&#xff0c;但是「PhotoShop」现在对电脑配置要求越来越高&#xff0c;体积越来越大…

流行的API架构学习

几种流行的API架构风格图 SOAP&#xff08;Simple Object Access Protocol&#xff09; 优点&#xff1a;SOAP 是一种基于 XML 的通信协议&#xff0c;具有良好的跨平台和跨语言支持。它提供了丰富的安全性和事务管理功能&#xff0c;并支持复杂的消息交换模式。 缺点&#xf…

windows,web端网页唤起打开本地的客户端程序

这里写自定义目录标题 需求&#xff1a;在电脑浏览器网页唤起本地的应用程序 使用类似以下代码 <a href"myprotocol:">打开飞书</a>在客户端安装的时候在注册表会有自己的协议&#xff0c;若是没有的可自定义注册表 自定义注册表步骤 1.winr 运行 regedi…

物联网工程-系统设计作业

1.设计一套基于RFID牛场养殖信息管理系统&#xff0c;并给出系统设计思路、系统构架和控制流程图。 一、设计思想 为方便牛场养殖员鉴别和管理牛群&#xff0c;为每只牛佩戴有RFID标签的动物耳钉&#xff0c;并将牛的健康情况录入数据库中&#xff0c;随着牛的生长&#xff0c;…

[StartingPoint][Tier1]Funnel

Task 1 How many TCP ports are open? (打开了多少个 TCP 端口&#xff1f;) # nmap -sS -T4 10.129.224.226 --min-rate 1000 2 Task 2 What is the name of the directory that is available on the FTP server? (FTP 服务器上可用的目录名称是什么&#xff1f;) $ n…

数据库系统概论(超详解!!!)第三节 关系数据库标准语言SQL(Ⅵ)

1.空值的处理 空值就是“不知道”或“不存在”或“无意义”的值。 一般有以下几种情况&#xff1a; 该属性应该有一个值&#xff0c;但目前不知道它的具体值 &#xff1b;该属性不应该有值 &#xff1b;由于某种原因不便于填写。 1.空值的产生 空值是一个很特殊的值&#x…

云仓酒庄旗下雷盛红酒入驻香港星怡SingLa餐厅共绘美食美酒新篇章

近日&#xff0c;云仓酒庄旗下品牌雷盛红酒正式入驻香港餐厅星怡SingLa&#xff0c;这一跨界合作不仅为香港市民和游客带来了全新的味蕾享受&#xff0c;也标志着美食与美酒文化的很好结合&#xff0c;共同绘就了一幅精彩绝伦的美食美酒新篇章。 云仓酒庄一直以来都致力于为消费…

Rust 程序设计语言学习——枚举模式匹配

枚举&#xff08;enumerations&#xff09;&#xff0c;也被称作 enums。match 允许我们将一个值与一系列的模式相比较&#xff0c;并根据相匹配的模式执行相应代码。 1 枚举的定义 假设我们要跨省出行&#xff0c;有多种交通工具供选择。常用的交通工具有飞机、火车、汽车和轮…

备战蓝桥杯Day37 - 真题 - 特殊日期

一、题目描述 思路&#xff1a; 1、统计2000年到2000000年的日期&#xff0c;肯定是需要遍历 2、闰年的2月是29天&#xff0c;非闰年的2月是28天。我们需要判断这一年是否是闰年。 1、3、5、7、8、10、12月是31天&#xff0c;4、6、9、11月是30天。 3、年份yy是月份mm的倍数…

【Entity Framework】EF配置文件设置详解

【Entity Framework】EF配置文件设置详解 文章目录 【Entity Framework】EF配置文件设置详解一、概述二、实体框架配置部分三、连接字符串四、EF数据库提供程序五、EF侦听器六、将数据库操作记录到文件中七、Code First默认连接工厂八、数据库初始值设定项 一、概述 EF实体框架…

OKR应用层级与试点部门选择:管理层与员工层的应用探讨

OKR&#xff08;Objectives and Key Results&#xff09;作为一种高效的目标管理工具&#xff0c;其应用层级的选择对于企业的实施效果至关重要。在管理层和员工层之间&#xff0c;并没有绝对的先后顺序&#xff0c;而是需要根据企业的具体情况和需求进行灵活应用。同时&#x…

python买铅笔 2024年3月青少年电子学会等级考试 中小学生python编程等级考试一级真题答案解析

目录 python买铅笔 一、题目要求 1、编程实现 2、输入输出 二、算法分析 三、程序代码 四、程序说明 五、运行结果 六、考点分析 七、 推荐资料 1、蓝桥杯比赛 2、考级资料 3、其它资料 python买铅笔 2024年3月 python编程等级考试级编程题 一、题目要求 1、编…

【电路笔记】-逻辑非门

逻辑非门 文章目录 逻辑非门1、概述2、晶体管逻辑非门3、六角施密特反相器逻辑非门是所有逻辑门中最基本的,通常称为反相缓冲器或简称为反相器。 1、概述 反相非门是单输入器件,其输出电平通常为逻辑电平“1”,当其单个输入为逻辑电平“1”时,输出电平变为“低”至逻辑电平…

通用爬虫的概念简述

一、&#x1f308;什么是通用爬虫 通用爬虫&#xff08;General Purpose Web Crawler或Scalable Web Crawler&#xff09;是一种网络爬虫&#xff0c;其设计目标是对整个互联网或尽可能广泛的网络空间进行数据抓取。通用爬虫主要用于搜索引擎构建其庞大的网页索引数据库&#…