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:

<i class="icon-del"></i>

SVG:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"viewBox="-691 693 16 16" style="enable-background:new -691 693 16 16;" xml:space="preserve">
<title>删除群成员</title>
<desc>Created with Sketch.</desc>
<g id="Page-1"><g id="群组名片成员_x28_管理员_x29_" transform="translate(-284.000000, -249.000000)"><g id="Group-19"><g id="Group-14" transform="translate(20.000000, 120.000000)"><g id="群成员-copy-4" transform="translate(0.000000, 121.000000)"><g id="删除群成员" transform="translate(264.000000, 8.000000)"><g id="Group" transform="translate(2.000000, 2.000000)"><g id="Oval-9"><circle class="st0" cx="-685" cy="699" r="6"/></g><g id="Path-2"><path class="st1" d="M-681,700h-8c-0.6,0-1-0.4-1-1s0.4-1,1-1h8c0.6,0,1,0.4,1,1S-680.4,700-681,700z"/></g></g></g></g></g></g></g>
</g>
</svg>

 

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

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

相关文章

NOIP 2012 Day2

tags: 扩展欧几里得二分答案查分倍增二分答案贪心NOIP categories:信息学竞赛总结同余方程借教室疫情控制 同余方程 Solution 首先同余式可以转化为等式.\[ax\equiv 1\mod b\Leftrightarrow axby1\]   根据扩展欧几里得定理, 对于式\[axbyk(a,b),k\in \mathbf{R}\]一定存在整…

Qt之QSS(Q_PROPERTY-自定义属性)

版权声明&#xff1a;进步始于交流&#xff0c;收获源于分享&#xff01;纯正开源之美&#xff0c;有趣、好玩、靠谱。。。作者&#xff1a;一去丶二三里 博客地址&#xff1a;http://blog.csdn.net/liang19890820 目录(?)[] 简述 在Qt之QSS&#xff08;Q_PROPERTY-原始属性&a…

python print error 空_python笔记37:10分钟掌握异常处理,再也不担心程序挂了

主要内容&#xff1a;小目标&#xff1a;异常处理主要内容&#xff1a;错误与异常&#xff0c;try_except语句对于撸代码的程序员来说&#xff0c;程序运行中出现问题是常见的现象&#xff1b;实际学习与工作中&#xff0c;我们会花很大的精力去解决各种问题&#xff1b;1. 程序…

在URL参数中传递复杂对象

假设您要传递原始数据类型&#xff0c;例如复杂的Java对象 java.util.Data&#xff0c;java.lang.List&#xff0c;泛型类&#xff0c;数组以及通过URL参数所需的所有内容&#xff0c;以便在页面加载后在任何网页上预设默认值。 共同的任务&#xff1f; 是的&#xff0c;但是可…

contenteditable元素的placeholder输入提示语设置

在某些情况下&#xff0c;textarea是不够用的&#xff0c;我们还需要显示一些图标或者高亮元素&#xff0c;这就需要用富文本编辑器&#xff0c;而富文本编辑器本质上是HTML元素设置了contenteditable。 然后可能需要像input、textarea有placeholder的输入提示语&#xff0c;但…

CF 961E Tufurama

JYZdalao上课讲了这道题&#xff0c;觉得很好可做 其实也是一道理解了就水爆了的题目 把题意抽象化&#xff0c;可以发现题目求的满足 i<ja[i]>ja[j]>i的i&#xff0c;j对数。由于i&#xff0c;j顺序问题&#xff0c;可以在不考虑i&#xff0c;j顺序的情况下将ans>…

使用JCA的密码术–提供者中的服务

Java密码体系结构&#xff08;JCA&#xff09;是一个可扩展的框架&#xff0c;使您能够使用执行加密操作。 JCA还促进实现独立性&#xff08;程序不应该在乎谁提供加密服务&#xff09;和实现互操作性&#xff08;程序不应该与特定加密服务的特定提供者联系在一起&#xff09;。…

IE浏览器支持响应式网站设计

目前响应式网站设计比较流行, 下面是摘自百度百科有关响应式设计的定义. 响应式网站设计是一种网络页面设计布局&#xff0c;其理念是&#xff1a;集中创建页面的图片排版大小&#xff0c;可以智能地根据用户行为以及使用的设备环境进行相对应的布局。 但是, 响应式设计并不能原…

python循环for不从零开始_Python-多处理-巨大的for循环

下午好&#xff0c;我对Python还是很陌生&#xff0c;我必须解决一个需要尝试数十亿个假设的问题...更具体地说&#xff0c;我需要迭代440个元素的列表&#xff0c;但我需要这样做8次...(是的&#xff0c;我知道OS迭代的次数完全是疯狂的。我的机器相当不错&#xff0c;所以我想…

Bridge Across Islands POJ - 3608 凸多边形间最小距离/旋转卡壳

旋转的部分始终感觉有点别扭。。后来发现是因为叉积顺序为负。。 所以让三角形面积逐渐变大实际上就是让三角形面积变小&#xff08;绝对值意义上的&#xff09;&#xff0c;这样就是让高变小了。。 至于为什么要选最下和最上。。应该是为了满足两条线始终可以生成所有多边形间…

绑定到JSON和XML –处理集合

EclipseLink JAXB&#xff08;MOXy&#xff09;的优势之一是能够通过一组元数据将对象模型映射到JSON和XML。 一个弱点是您需要在JSON键或XML元素上折衷集合属性。 我很高兴地说这个问题已经在EclipseLink 2.5&#xff08;和EclipseLink 2.4.2&#xff09;中得到解决&#xff0…

【WIP】Bootstrap 基础

创建: 2017/09/28 更新: 2017/10/14 标题加上【WIP】转载于:https://www.cnblogs.com/lancgg/p/8281714.html

xml mysql 模糊查询_mybatis+Spring mysql的模糊查询问题

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼查询的mapping.xml语法resultType"java.lang.Integer">SELECTcount(yy_id)FROMmc_usersystem_version like CONCAT(%,${system_version },% )比如当我为字段 system_version 赋值为 ”3512“ 的时候 能查询出来若是我…

css 浮动和清除浮动

在写页面布局的过程中&#xff0c;浮动是大家经常用的属性。在好多的排版布局中都是用的的浮动比如说下面这些地方都是应用到了浮动。 在我学习浮动的时候可是熬坏了脑筋&#xff0c;在这里我分享一下我对浮动这块知识的总结。 一、浮动的定义 使元素脱离文档流&#xff0c;按…

Java Code Geeks和Packt提供的Hadoop书籍赠品

亲爱的极客&#xff0c;由于参与度很高&#xff0c;并且为了有机会赢得尽可能多的Hadoop粉丝&#xff0c;我们决定将竞赛延长一个星期&#xff0c;直到下周二。 各位极客&#xff0c; 赠品在Java Code Geeks上继续。 我们很高兴地宣布&#xff0c;我们再次与Packt Publishin…

【转】 差分约束系统详解(转化为最短路) (概念)

---恢复内容开始--- 转自&#xff1a;http://www.cnblogs.com/void/archive/2011/08/26/2153928.html 差分约束系统中&#xff1a; 如果求未知数的最大值&#xff0c;那么按小于等于建图后求最短路即可。&#xff08;因为求最短路是由无穷向下约束而得到的&#xff0c;所以得到…

jq实现点击某元素之外触发事件

1 $(document).bind("click",function(e){ 2 var target $(e.target); 3 if(target.closest("#parentId").length 0){//点击id为parentId之外的地方触发 4 layer.close(tip_index); 5 type0; 6 } 7 }) …

mysql数据库连接时区设置_springboot 连接数据库之时区设置

抽空查看以前的开发日志&#xff0c;发现了一些“问题”日志&#xff0c;决定整理后陆陆续续发出来吧&#xff0c;也为有需要的话小伙伴提供点帮助。在springboot启动之时&#xff0c;报错了&#xff0c;一看应该就是连接MySql数据库时出的问题。create connection SQLExceptio…

【HTML基础】表格和表单

本次博客的主要内容如下&#xff1a; meta和link表格表单 meta和link meta meta的属性有两种&#xff1a;name和http-equiv。 name属性主要用于描述网页内容&#xff0c;对应与网页内容。 1.关键字&#xff0c;当搜索引擎在爬取内容的时候&#xff0c;会根据关键字判断&a…

定义EJB 3.1视图(本地,远程,无接口)

这篇文章将讨论使用批注定义EJB视图的可能方法&#xff08;最后我将只提到使用EJB部署描述符&#xff09;。我将重点介绍最新的EJB 3.1视图&#xff0c;这些视图将省略旧的本地&#xff0c;远程和本地接口。 因此&#xff0c;我们可以选择&#xff1a; 远程业务界面视图&#…