当前位置: 首页 > news >正文

img引入svg如何修改颜色

方法1:通过css中filter:drop-shadow

首先需要一个容纳图标的父盒子(下方实例中的.svg-img),通过css造一个图标的‘影子’(.svg-color中的drop-shadow),然后设置‘影子’的颜色,再把图标本体移出父盒子,让‘影子’占据本体所在位置,最后后对父盒子设置溢出隐藏达到效果

drop-shadow 语法:

filter: drop-shadow( offset-x offset-y blur-radius spread-radius color ) 
filter: drop-shadow( x轴偏移 y轴偏移 模糊半径 传播半径 投影颜色);

具体实现:

<div class="svg-img"> <img class="svg-color" :src="svgUrl"> 
</div>
<script setup>
import { ref } from 'vue';
import svgUrl from './icons/weather/100.svg'; // 使用import语法引入SVGconst svgUrlRef = ref(svgUrl); // 使用ref来创建响应式数据
</script>
.svg-img { width: 60px; height: 60px; overflow: hidden; display: inline-block; >.svg-color{ width: 100%; height: 100%; transform: translateX(60px); filter: drop-shadow(#684a2c -60px 0px 0px); } 
}

translateX中的60px和drop-shadow中的-60px必须是一个相同的值,并且最好是大于等于宽高的最大值,这样设置得到的带颜色的阴影图片才会完整无误的在本体图片位置上。

方法2:通过mask-image 属性引入svg图标并使用 background-color 改变svg图标颜色

<img class="svg-color" :style="{ WebkitMaskImage: `url(${svgUrl})`, maskImage: `url(${svgUrl})` }" 
>
<script setup>
import { ref } from 'vue';
import svgUrl from './icons/weather/100.svg'; // 使用import语法引入SVGconst svgUrlRef = ref(svgUrl); // 使用ref来创建响应式数据
</script>
.svg-color{ width: 60px; height: 60px; display: inline-block; background-color: #684a2c; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain;mask-size: contain; 
}

相关文章:

img引入svg如何修改颜色

方法1&#xff1a;通过css中filter:drop-shadow 首先需要一个容纳图标的父盒子(下方实例中的.svg-img)&#xff0c;通过css造一个图标的‘影子’&#xff08;.svg-color中的drop-shadow&#xff09;&#xff0c;然后设置‘影子’的颜色&#xff0c;再把图标本体移出父盒子&…...

计算机毕业设计PySpark+PyFlink+Hive地震预测系统 地震数据分析可视化 地震爬虫 大数据毕业设计 Hadoop 机器学习 深度学习

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…...

【Python】使用Numpy实现余弦相似度计算

本文详细介绍了如何使用 NumPy 实现两个向量之间的余弦相似度计算&#xff0c;帮助理解向量相似度在推荐系统、文本处理等领域的应用。 1. 余弦相似度定义 余弦相似度是衡量两个向量在高维空间中夹角大小的指标&#xff0c;其公式为&#xff1a; c o s ( θ ) A ⋅ B ∥ A ∥…...

nginx中的root和alias的区别

alias 在E:\\test\\目录下创建一个index.html文件 在nginx.conf文件配置alias,路径填写为绝对路径&#xff0c;但是要注意&#xff0c;这里结尾是文件夹的名字 然后下面的/aa/ 是随便起的名字&#xff0c;也不是文件夹的名字&#xff0c;在浏览器访问的使用的 在浏览器使用 …...

探索Telnet:实现Windows远程登录Ubuntu的实践指南

前言 在互联网技术日新月异的今天&#xff0c;远程登录已经成为许多开发者和系统管理员日常工作中不可或缺的一部分。虽然SSH已经成为远程登录的首选协议&#xff0c;但了解并掌握Telnet这一经典协议仍然具有重要意义。本文将带您一起探索如何使用Telnet实现Windows远程登录Ub…...

在 Vue 2 中隐藏页面元素的方法

目录 在 Vue 2 中隐藏页面元素的方法 引言 1. 使用 v-if 指令 2. 使用 v-show 指令 3. 使用自定义类名与 v-bind:class 4. 使用内联样式与 v-bind:style 5. 使用组件的 keep-alive 和条件渲染 在 Vue 2 中隐藏页面元素的方法 引言 在开发 Web 应用时&#xff0c;我们经…...

【Java】Java8的4个函数式接口简单教程

什么是函数是接口&#xff1f; 函数式接口是一个包含 单个抽象方法 的接口&#xff0c;且可以有任意多个默认方法或静态方法。为了增强可读性&#xff0c;Java 8 引入了 FunctionalInterface 注解&#xff0c;用于标识该接口是一个函数式接口&#xff0c;编译器会帮助我们检查…...

计算机组成原理与系统结构——微程序控制

笔记内容及图片整理自XJTUSE “计算机组成原理与系统结构” 课程ppt&#xff0c;仅供学习交流使用&#xff0c;谢谢。 基本概念 微指令 将控制单元实现为基本逻辑单元之间的互连并非易事&#xff0c;且设计相对呆板&#xff0c;难以灵活地改变&#xff0c;因此实现微程序控制…...

【Swift】集合类型 - 数组、集合、字典

文章目录 集合的可变性数组数组类型简写语法创建空数组使用默认值创建数组通过合并两个数组创建一个新数组使用数组字面量创建数组访问和修改数组 Swift 提供了三种主要的 集合类型&#xff0c;分别是数组、集合和字典&#xff0c;用于存储值集合。数组是有序的值集合。集合是无…...

3D 视觉定位技术:汽车零部件制造的智能变革引擎

在汽车零部件制造领域&#xff0c;传统工艺正面临着前所未有的挑战。市场对于零部件精度与生产效率近乎苛刻的要求&#xff0c;促使企业寻求突破之道。而 3D 视觉定位技术&#xff0c;为汽车零部件制造开启了精准定位与智能化生产的新纪元。 3D 视觉定位系统的核心技术原理 3…...

操作系统的基本认识

操作系统的感性认识 操作系统这个词可能或多或少听说过&#xff0c;比如windows, linux, macOS。这些其实都是工程师们经过实践后的具象化产物。而操作系统原理这六个字就是操作系统的抽象化&#xff0c;更准确的说&#xff0c;操作系统原理是很理论化的东西。举一个不是很恰当…...

使用pycharm连接远程服务器

使用pycharm连接远程服务器 1.在你的项目里配置 SSH &#xff0c;放到服务器上去跑 主机为服务器的IP地址&#xff0c;输入用户名和密码 配置项目位置、选择编译器 2.设置本地更改代码保存后即上传到服务器 在本地使用 pycharm 调试代码&#xff0c;pycharm 上面的代码更改…...

【Linux SH脚本】LinuxCheck 应急检查信息脚本

LinuxCheck 1.下载地址 【Linux SH脚本】LinuxCheck 应急检查信息脚本 2.简介 LinuxCheck 是一个开源的自动化检查脚本&#xff0c;旨在快速检测 Linux 系统的安全配置和潜在问题。它支持多种发行版&#xff0c;能够扫描并生成详细的报告&#xff0c;涵盖用户管理、权限配置…...

apifox创建一个mock接口

1、新建接口 2、选择mock&#xff0c;开启云端mock&#xff1b; 3、新建期望&#xff1b; 4、编辑响应体&#xff1b; 5、快速请求&#xff0c;测试&#xff1b; &#xff08;主要可能是网络问题&#xff0c;也可以自己python mock一个&#xff1b;apifox简单快速&#xf…...

设计一个基础JWT的多开发语言分布式电商系统

在设计一个分布式电商系统时&#xff0c;保证系统的可扩展性、性能以及跨语言的兼容性是至关重要的。随着微服务架构的流行&#xff0c;越来越多的电商系统需要在多个服务间共享信息&#xff0c;并且保证服务的安全性。在这样的场景下&#xff0c;JSON Web Token&#xff08;JW…...

委托(Delegate)与事件(Event)-(上篇)

C#中的委托&#xff08;Delegate&#xff09;是一种类型安全的函数指针&#xff0c;它允许将方法作为参数传递给其他方法&#xff0c;并且可以用来实现回调机制。委托是C#中实现事件处理、异步编程以及面向对象设计模式的重要工具之一。在C#中&#xff0c;委托被定义为引用类型…...

Scala根据身份证前两位数判断地区

方法一 val id "339005200101010928"// 取出id前两位 val province id.substring(0, 2) /*//println(province)if (province "42") {println("湖北")}else if (province "11") {println("北京")}else if (province &qu…...

freeswitch(开启支持视频H264通话)

亲测版本centos 7.9系统–》 freeswitch1.10.9 本人freeswitch安装路径(根据自己的路径进入) /usr/local/freeswitch/etc/freeswitch场景介绍: 内部默认是不支持的,视频通话,需要开启模块使用方法: 第一步:进入vars.xml 下面找到global_codec_prefs和outbound_codec_pr…...

启发式搜索算法和优化算法的区别

启发式搜索算法和优化算法在计算机科学中都有广泛的应用&#xff0c;但它们之间存在一些明显的区别。 一、定义与核心思想 启发式搜索算法 定义&#xff1a;启发式搜索算法是一类基于经验和直觉的问题求解方法&#xff0c;通过观察问题的特点&#xff0c;并根据某种指…...

数据结构初阶---二叉树---堆

一、树 1.树的概念 树是一种非线性的数据结构&#xff0c;由n(n≥0)个有限结点组成的一个有层次关系的集合。形状类似一棵倒挂的树&#xff0c;根朝上&#xff0c;分支向下。 根结点没有前驱结点&#xff0c;可以有n(n≥0)个后继结点。 其余结点被分为M个互不相交的集合&am…...

云原生核心技术 (7/12): K8s 核心概念白话解读(上):Pod 和 Deployment 究竟是什么?

大家好&#xff0c;欢迎来到《云原生核心技术》系列的第七篇&#xff01; 在上一篇&#xff0c;我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在&#xff0c;我们就像一个拥有了一块崭新数字土地的农场主&#xff0c;是时…...

【人工智能】神经网络的优化器optimizer(二):Adagrad自适应学习率优化器

一.自适应梯度算法Adagrad概述 Adagrad&#xff08;Adaptive Gradient Algorithm&#xff09;是一种自适应学习率的优化算法&#xff0c;由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率&#xff0c;适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...

【Zephyr 系列 10】实战项目:打造一个蓝牙传感器终端 + 网关系统(完整架构与全栈实现)

🧠关键词:Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者:希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数:约 5200 字 ✨ 项目总览 在物联网实际项目中,**“终端 + 网关”**是…...

Mobile ALOHA全身模仿学习

一、题目 Mobile ALOHA&#xff1a;通过低成本全身远程操作学习双手移动操作 传统模仿学习&#xff08;Imitation Learning&#xff09;缺点&#xff1a;聚焦与桌面操作&#xff0c;缺乏通用任务所需的移动性和灵活性 本论文优点&#xff1a;&#xff08;1&#xff09;在ALOHA…...

算法笔记2

1.字符串拼接最好用StringBuilder&#xff0c;不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...

AirSim/Cosys-AirSim 游戏开发(四)外部固定位置监控相机

这个博客介绍了如何通过 settings.json 文件添加一个无人机外的 固定位置监控相机&#xff0c;因为在使用过程中发现 Airsim 对外部监控相机的描述模糊&#xff0c;而 Cosys-Airsim 在官方文档中没有提供外部监控相机设置&#xff0c;最后在源码示例中找到了&#xff0c;所以感…...

EEG-fNIRS联合成像在跨频率耦合研究中的创新应用

摘要 神经影像技术对医学科学产生了深远的影响&#xff0c;推动了许多神经系统疾病研究的进展并改善了其诊断方法。在此背景下&#xff0c;基于神经血管耦合现象的多模态神经影像方法&#xff0c;通过融合各自优势来提供有关大脑皮层神经活动的互补信息。在这里&#xff0c;本研…...

更新 Docker 容器中的某一个文件

&#x1f504; 如何更新 Docker 容器中的某一个文件 以下是几种在 Docker 中更新单个文件的常用方法&#xff0c;适用于不同场景。 ✅ 方法一&#xff1a;使用 docker cp 拷贝文件到容器中&#xff08;最简单&#xff09; &#x1f9f0; 命令格式&#xff1a; docker cp <…...

Qt/C++学习系列之列表使用记录

Qt/C学习系列之列表使用记录 前言列表的初始化界面初始化设置名称获取简单设置 单元格存储总结 前言 列表的使用主要基于QTableWidget控件&#xff0c;同步使用QTableWidgetItem进行单元格的设置&#xff0c;最后可以使用QAxObject进行单元格的数据读出将数据进行存储。接下来…...