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; }
 

demo

总结

mask 属性十分强大,但是需要最先进的浏览器支持。

使用 CSS MARK 改变 SVG 背景色的更多相关文章

  1. css改变svg的颜色

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. C#TreeView节点选中后失去焦点时改变节点背景色

    C#TreeView节点选中后失去焦点时改变节点背景色 在使用TreeView控件时候,单击一个节点,当鼠标聚焦到别的地方的时候,之前点击的这个节点就看不清楚了 举例截图 单击后           ...

  3. 通过css改变svg img的颜色

    需求如下图,hover的时候改变图标颜色,图标为引入的svg img 一般的解决办法有:1.字体图标改变css的color属性:2.js在hover事件中切换图片:3.老一点的方案是hover切换背景 ...

  4. CSS实现点击改变元素背景色

    可通过使用css伪类实现点击元素变色的效果,两个伪类是:active, :focus :active :active选择器用于选择活动链接.当在一个链接上点击时,它就会成为活动的(激活的),:acti ...

  5. CSS手动改变DIV高宽

    本实例代码可以使DIV可以手动改变大小 效果体验:http://hovertree.com/code/css/resize.htm 代码如下: <!DOCTYPE html> <ht ...

  6. CSS/HTML 改变鼠标指针形状

    改变鼠标指针形状的方法有两种:第一种:用的来改变鼠标指针形状.另一种是:利用第三方控件的方法,而我自己最常用的是第一种:用css样式表来改变鼠标指针形状 我们先来看第一种:用来改变鼠标指针形状. 有些 ...

  7. CSS grayscale滤镜+SVG使图片变黑白实例页面

    http:/CSS 地址:/www.runoob.com/cssref/css3-pr-filter.html CSS代码: .gray { -webkit-filter: grayscale(%); ...

  8. 【css3】使用filter属性实现改变svg图标颜色

    1.兼容性: 2.应用场景:新增页面上传svg图标后,更改图标颜色后,在列表页面展示色值改后的svg图标. 3.解决方案:使用filter属性中的 drop-shadow,drop-shadow滤镜可 ...

  9. easyui datagrid 动态改变行背景色

    /*根据查询条件查询调度单列表*/ function InitGrid(queryData) { $("#dg").datagrid({ loadMsg: "数据加载中, ...

随机推荐

  1. 每天一个linux命令:pwd命令

    Linux中用 pwd 命令来查看”当前工作目录“的完整路径. 简单得说,每当你在终端进行操作时,你都会有一个当前工作目录. 在不太确定当前位置时,就会使用pwd来判定当前目录在文件系统内的确切位置. ...

  2. 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这个表( ...

  3. iptables filter表小案例

    案例1:把80端口,22端口,21端口放行 22端口指定IP访问,其它IP拒绝. shell脚本实现: [root@centos7 ~]# vim /usr/local/sbin/iptables.s ...

  4. Java学习之——泛型

    1.概要 generics enable types (classes and interfaces) to be parameters when defining classes, interfac ...

  5. Windows下使用最新的JDK1.7.0_51以上版本连接Jenkins出现SecurityException

    我在slave节点上安装了jdk1.8, 当在节点上启动slave-agent的时候,报安全性限制的错误: java.lang.SecurityException: Missing required ...

  6. Blender 建模

    1.多图层切换 Blender也有图层的概念,我们在一个图层上建立了一个模型,可以在另外一个图层新建一个独立的模型.界面底部包含了Layer切换按钮.如下图所示: 当前我们正在操作第一个图层,如果想在 ...

  7. linq to xml 增删查改

    一.XML基本概述 XML文件是一种常用的文件格式,例如WinForm里面的app.config以及Web程序中的web.config文件,还有许多重要的场所都有它的身影.Xml是Internet环境 ...

  8. Android基础部分再学习---activity的状态保存

    主要是bundle   这个參数 參考地址:http://blog.csdn.net/lonelyroamer/article/details/18715975 学习Activity的生命周期,我们知 ...

  9. Java把数字格式化为货币字符串

    数字可以标志货币.百分比.积分和电话号码等,就货币而言,在不同的国家会以不同的格式来定义,本实例将接收用户输入的数字,然后在控制台中输出其货币格式,其中使用了不同国家的货币格式. 思路如下:使用Num ...

  10. 解决select2在modal中无法输入的问题

    解决办法: 在js里加一句 $.fn.modal.Constructor.prototype.enforceFocus = function(){};