使用 CSS MARK 改变 SVG 背景色
CSS masks
-webkit-mask
这个属性是相当强大的,详细的介绍请到这里查看,它非常值得深入研究.
-webkit-mask 让为一个元素添加蒙板成为可能,从而你可以创建任意形状的花样。蒙板可以是 CSS3 渐变或者半透明的 PNG 图片。蒙板元素的 alpha 值为0的时候会覆盖下面的元素,为1的时候会完全显示下面的内容。相关的属性有 -webkit-mask-clip 、 -webkit-mask-position 和 -webkit-mask-repeat 等,严重依赖来自于 background 中的语法。
可以如下添加 CSS 代码,让 SVG 作为蒙版图:
1
2
3
4
5
6
|
.icon {
background-color: red;
-webkit-mask-image: url(icon.svg);
mask-image: url(icon.svg);
}
|
改变 SVG 颜色
SVG 可以画出各种形状的图形,使用十分方便,通过以下方法可以只改变CSS的背景颜色就改变 SVG 的背景颜色。
HTML 结构:
1
2
3
4
5
6
7
|
<div class="icon icon-red"></div>
<div class="icon icon-orange"></div>
<div class="icon icon-yellow"></div>
<div class="icon icon-green"></div>
<div class="icon icon-blue"></div>
...
|
CSS:
1
2
3
4
5
6
7
8
9
10
11
|
/*给每个 div 添加样式,并使用 SVG 最为蒙版背景*/
.icon {
width: 48px;
height: 48px;
display: inline-block;
-webkit-mask: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg) no-repeat 50% 50%;
mask: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg) no-repeat 50% 50%;
-webkit-mask-size: cover;
mask-size: cover;
}
|
只要改变 div 背景颜色, SVG 的颜色也会改变
1
2
3
4
5
6
|
.icon-red { background-color: red; }
.icon-orange { background-color: orange; }
.icon-yellow { background-color: yellow; }
.icon-green { background-color: green; }
.icon-blue { background-color: blue; }
|
总结
mask 属性十分强大,但是需要最先进的浏览器支持。
使用 CSS MARK 改变 SVG 背景色的更多相关文章
- css改变svg的颜色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- C#TreeView节点选中后失去焦点时改变节点背景色
C#TreeView节点选中后失去焦点时改变节点背景色 在使用TreeView控件时候,单击一个节点,当鼠标聚焦到别的地方的时候,之前点击的这个节点就看不清楚了 举例截图 单击后 ...
- 通过css改变svg img的颜色
需求如下图,hover的时候改变图标颜色,图标为引入的svg img 一般的解决办法有:1.字体图标改变css的color属性:2.js在hover事件中切换图片:3.老一点的方案是hover切换背景 ...
- CSS实现点击改变元素背景色
可通过使用css伪类实现点击元素变色的效果,两个伪类是:active, :focus :active :active选择器用于选择活动链接.当在一个链接上点击时,它就会成为活动的(激活的),:acti ...
- CSS手动改变DIV高宽
本实例代码可以使DIV可以手动改变大小 效果体验:http://hovertree.com/code/css/resize.htm 代码如下: <!DOCTYPE html> <ht ...
- CSS/HTML 改变鼠标指针形状
改变鼠标指针形状的方法有两种:第一种:用的来改变鼠标指针形状.另一种是:利用第三方控件的方法,而我自己最常用的是第一种:用css样式表来改变鼠标指针形状 我们先来看第一种:用来改变鼠标指针形状. 有些 ...
- CSS grayscale滤镜+SVG使图片变黑白实例页面
http:/CSS 地址:/www.runoob.com/cssref/css3-pr-filter.html CSS代码: .gray { -webkit-filter: grayscale(%); ...
- 【css3】使用filter属性实现改变svg图标颜色
1.兼容性: 2.应用场景:新增页面上传svg图标后,更改图标颜色后,在列表页面展示色值改后的svg图标. 3.解决方案:使用filter属性中的 drop-shadow,drop-shadow滤镜可 ...
- easyui datagrid 动态改变行背景色
/*根据查询条件查询调度单列表*/ function InitGrid(queryData) { $("#dg").datagrid({ loadMsg: "数据加载中, ...
随机推荐
- 每天一个linux命令:pwd命令
Linux中用 pwd 命令来查看”当前工作目录“的完整路径. 简单得说,每当你在终端进行操作时,你都会有一个当前工作目录. 在不太确定当前位置时,就会使用pwd来判定当前目录在文件系统内的确切位置. ...
- MYSQL之You can't specify target table for update in FROM clause解决办法
mysql中You can't specify target table for update in FROM clause错误的意思是说,不能先select出同一表中的某些值,再update这个表( ...
- iptables filter表小案例
案例1:把80端口,22端口,21端口放行 22端口指定IP访问,其它IP拒绝. shell脚本实现: [root@centos7 ~]# vim /usr/local/sbin/iptables.s ...
- Java学习之——泛型
1.概要 generics enable types (classes and interfaces) to be parameters when defining classes, interfac ...
- Windows下使用最新的JDK1.7.0_51以上版本连接Jenkins出现SecurityException
我在slave节点上安装了jdk1.8, 当在节点上启动slave-agent的时候,报安全性限制的错误: java.lang.SecurityException: Missing required ...
- Blender 建模
1.多图层切换 Blender也有图层的概念,我们在一个图层上建立了一个模型,可以在另外一个图层新建一个独立的模型.界面底部包含了Layer切换按钮.如下图所示: 当前我们正在操作第一个图层,如果想在 ...
- linq to xml 增删查改
一.XML基本概述 XML文件是一种常用的文件格式,例如WinForm里面的app.config以及Web程序中的web.config文件,还有许多重要的场所都有它的身影.Xml是Internet环境 ...
- Android基础部分再学习---activity的状态保存
主要是bundle 这个參数 參考地址:http://blog.csdn.net/lonelyroamer/article/details/18715975 学习Activity的生命周期,我们知 ...
- Java把数字格式化为货币字符串
数字可以标志货币.百分比.积分和电话号码等,就货币而言,在不同的国家会以不同的格式来定义,本实例将接收用户输入的数字,然后在控制台中输出其货币格式,其中使用了不同国家的货币格式. 思路如下:使用Num ...
- 解决select2在modal中无法输入的问题
解决办法: 在js里加一句 $.fn.modal.Constructor.prototype.enforceFocus = function(){};