如何在background-image中使用svg如何改变颜色

结论

在我多番测试之后,才发现background-image使用svg,改变颜色根本做不了。

分析

当svg图片被使用成background-image,颜色的设置需要在svg内部才能生效。在外部CSS设置颜色样式,却是无效,这其实可以从CSS选择器得到解释,CSS选择器必须选择到DOM元素,而svg却被做成背景图,并没有以元素引入,所以在外部也就设不了颜色。

例子

CSS:

i {    display: inline-block;    width: 100px;    height: 100px;}.icon-del{    background-image: url(delete.svg);}.st0{fill:#EC665E;}.st1{fill:#FFFFFF;}

HTML:

SVG:

删除群成员Created with Sketch.                                                                                                                                                                                                                                                                                                                                                                                                                                              

以上就是如何在background-image中使用svg如何改变颜色 的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1545000.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 16:29:02
下一篇 2025年12月18日 01:56:44

相关推荐

  • Html当中文本与标签如何让其居中

    1、文本居中: text-align: center;line-height: 100px; (=height) 2、标签居中 margin: 0 auto; 其中0指的是margin-top:0 代码片: 搜索论坛 .item1{ height: 100px; width: 100px; back…

    2025年12月21日
    000
  • html中关于标签如何设置默认选中的选项详解

    方法有两种。 第一种通过的属性来设置选中项,此方法可以在动态语言如php在后台根据需要控制输出结果。 123 第二种为通过前端js来控制选中的项: function change(){ document.getElementById(“sel”)[2].selected=true;}123 获取标签…

    好文分享 2025年12月21日
    000
  • html中的链接如何默认打开方式标签元素的详解

    html 超链接(锚文本)默认打开方式与默认链接url地址标签元素 一、语法与结构 二、Html base超链接默认打开地址与打开方式标签使用说明    1、Target 值:    1、_blank 新窗口打开URL链接    2、_parent 在本网页刷新全新打开对应URL地址    3、_s…

    好文分享 2025年12月21日
    000
  • 关于html嵌入xml数据岛如何穿过树形结构关系

    html里面引用xml的数据岛,如何穿过树形结构的关系,我不知道这个datafld里面应该如何使用xml里面的标签名称,如何加前缀,如何从resume得到name子元素 如下面的代码细节,html里面引用xml的数据岛,如何穿过树形结构的关系? 我不知道这个datafld里面应该如何使用xml里面的…

    好文分享 2025年12月17日
    000
  • 如何获得配置文件中,连接数据库的连接字符串

    话袋AI笔记 话袋AI笔记, 像聊天一样随时随地记录每一个想法,打造属于你的个人知识库,成为你的外挂大脑 195 查看详情  ,

    2025年12月2日
    000
  • 如何添加新用户到你的MySQL数据库

    本文章主要讲一下如何添加新用户到你的MySQL数据库哦,因为一个mysql可能有很多数据库我们要给每个不同的数据库开权限,开用户,这个就有必要了。

    数据库 2025年12月2日
    200
  • SQLSERVER如何查看索引缺失

    SQLSERVER如何查看索引缺失 当大家发现数据库查询性能很慢的时候,大家都会想到加索引来优化数据库查询性能, 但是面对一个复杂的SQL语句,找到一个优化的索引组合对人脑来讲,真的不是一件很简单的事。 好在SQLSERVER提供了两种自动功能,给你建议,该怎么 SQLSERVER如何查看索引缺失 …

    2025年11月28日
    000
  • mysql字段类型如何选择

    本文主要和大家分享mysql字段类型如何选择。希望能帮助到大家。 尽量少的占据存储空间 整型 时间类型(选择准确的类型) 类型 含义 time()时分秒datetime()年月日  时分秒year()年份date()年月日timestamp()时间戳(1970-1-1到现在经历的秒数) 数据的整合最…

    2025年11月28日 数据库
    000
  • 带您理解SQLSERVER是如何执行一个查询的

    带您理解SQLSERVER是如何执行一个查询的 看这篇文章之前,阁下可以先看一下下面的文章 SQLSERVER独特的任务调度算法”SQLOS” SQL Server SQLOS 的任务调度[转] 翻译自: 不知道是哪篇文章抄哪篇文章的 ,不管他了,我也偷他们的文章,嘎嘎嘎嘎嘎…

    2025年11月27日 数据库
    000
  • Mysql如何配置及Mysql服务无法启动

    %ignore_a_1%压缩包安装与配置教程 1.首先下载Mysql压缩包在官网上,下载下来后解压。 2.在你的Mysql目录下新建文件夹data。保证data为空 3.配置my-default.ini文件,自己的地址,保存。 4.配置环境mysql的环境变量(不会的自行百度),到添加上就可以了。先…

    2025年11月26日 数据库
    000
  • 首次解释 LLM 如何推理反思!西北大学谷歌新框架:引入贝叶斯自适应强化学习,数学推理全面提升

    推理模型常表现出类似自我反思的行为,但它们是否真的能有效探索新策略? 对此,西北大学与 Google、谷歌 DeepMind 团队对传统强化学习与反思的关系提出质疑,并提出了贝叶斯自适应的强化学习方法,首次解释了为何、如何以及何时应进行反思和探索。 通过对比采用传统强化学习和新方法训练的模型,研究人…

    2025年11月17日 硬件教程
    000
  • 使用pt-table-checksum与pt-table-sync修复mysql主从数据不一致

    在MySql主从复制架构的应用中,长时间运行的DB出现各种异常之后,可能会有主备不一致的情况产生,偶尔会在同步时报错,影响正常的业务访问。那么当我们遇到这种        在mysql主从复制架构的应用中,长时间运行的db出现各种异常之后,可能会有主备不一致的情况产生,偶尔会在同步时报错,影响正常的…

    2025年11月9日
    000
  • .NET : 如何将大文件写入到数据库中

    最近利用空闲时间自己在写一个文件备份工具,因为我磁盘上的很多文件很重要,例如很多PPT和讲义。所以需要经常备份,而且因为这些文件很多,所以需要增量备份。 我尝试用过windows自带的ntbackup工具,但感觉不是很爽。它不支持压缩备份,而且界面也有点复杂 最近利用空闲时间自己在写一个文件备份工具…

    2025年11月9日
    000
  • Oracle索引技术之如何建立最佳索引

    1、明确地创建索引 create index index_name on table_name(field_name) tablespace tablespace_name pctfree 5 initrans 2 maxtrans 255 – storage ( minextents …

    数据库 2025年11月8日
    000
  • Access的控件如何对齐

    对齐是最经常使用到的布局方法之一,可能你已经掌握了这种方法。 假设有4个控件 靠左对齐的效果 靠右对齐的效果 假设有4个控件 靠上对齐的效果 靠下对齐的效果 如果选定的控件在对齐之后可能重叠,Microsoft Access 并不会将它们重叠,而会将这些控件的边相 对齐是最经常使用到的布局方法之一,…

    2025年11月8日 数据库
    000
  • 如何增加mysql的最大连接数

    在开始–Mysql–Mysql Server Instance Configuration Wizard 选Reconfigure Instance 后面的都是默认,直到出现 Please set the approximate number of concurrent co…

    数据库 2025年11月7日
    000
  • 如何远程修复损坏的mysql数据库

    当 mysql数据库 出现错误需要修复时,可以用mysqlcheck这个命令修复 点击开始-运行,输入 c:\mysqlcheck-r-u用户名-p数据库密码-h服务器地址数据库名 回车即可,如: c:\mysqlcheck-r-udemo-pdemo-h218.89.170.62demo 当mys…

    数据库 2025年11月7日
    400
  • MYSQL批量插入数据如何优化的方法介绍

    在网上也看到过另外的几种方法,比如说预处理sql,比如说批量提交。那么这些方法的性能到底如何?本文就会对这些方法做一个比较 一、我们遇到了什么问题 在标准SQL里面,我们通常会写下如下的SQL insert语句。 INSERT INTO TBL_TEST (id) VALUES(1); 很显然,在M…

    2025年11月6日 数据库
    000
  • MySQL如何创建用户?

    mysql如何创建用户 如知AI笔记 如知笔记——支持markdown的在线笔记,支持ai智能写作、AI搜索,支持DeepseekR1满血大模型 27 查看详情 一:首先看下用户信息的存储位置: 1.mysql中的用户,都存储在mysql系统的系统数据库“mysql”中。 2.表内容初始为: 二:创…

    2025年11月6日 数据库
    000
  • mysql如何给表设置组合主键?

    mysql  中有时候会遇到多个字段来表示数据的唯一性,那么这里就会用到组合主键了。 相关mysql视频教程推荐:《mysql教程》 1.编写创建表sql代码; 2.设置联合主键; 3.执行代码,发现出现错误; 4.解决方案:给id自增列加UNIQUE唯一索引; 爱图表 AI驱动的智能化图表创作平台…

    2025年11月6日 数据库
    200

发表回复

登录后才能评论
关注微信