2023年6月21日发(作者：)
CSSmask-image属性详细介绍（⼩结）CSS mask遮罩属性的历史⾮常久远了，远到⽐CSS3 border-radius等属性还要久远，最早是出现在Safari浏览器上的，差不多可以追溯到09年。不过那个时候，遮罩只能作为实验性的属性，做⼀些特效使⽤。毕竟那个年代还是IE浏览器的时代，属性虽好，但价值有限。但是如今情况却⼤有变化，除了IE和Edge浏览器不⽀持，Firefox，Chrome以及移动端等都已经全线⽀持，其实际应⽤价值已不可同⽇⽽语。尤其Firefox浏览器，从版本55开始，已经全⾯⽀持了CSS3 mask属性。并且mask属性规范已经进⼊候选推荐规范之列，会说以后进⼊既定规范标准已经是板上钉钉的事情，⼤家可以放⼼学习，将来必有⽤处。在过去，CSS mask属性在使⽤的时候就是mask: xxx，但是现在随着这个属性的规范化，mask属性实际上已经成为了诸多mask-*的缩写，这和background, border性质是⼀样的。具体是哪些属性的缩写呢，可以参见下⾯的列表：1. mask-image2. mask-mode3. mask-repeat4. mask-position5. mask-clip6. mask-origin7. mask-size8. mask-type9. mask-composite下⾯我们先来介绍 mask-image 属性的⽤法。mask-image指遮罩使⽤的图⽚资源，默认值是none，也就是⽆遮罩图⽚。因此，和border属性中的border-style属性类似，是⼀个想要有效果就必须设定的属性值。mask-image遮罩所⽀持的图⽚类型⾮常的⼴泛，可以是url()静态图⽚资源，格式包括JPG，PNG以及SVG等都是⽀持的；也可以是动态⽣成的图⽚，例如使⽤各种CSS3渐变绘制的图⽚。语法上⽀持CSS3各类渐变，以及url()功能符，image()功能符，甚⾄element()功能符。同时还⽀持多背景，因此理论上，使⽤mask-image我们可以遮罩出任意我们想要的图形，⾮常强⼤。眼见为实，我们通过⼤量案例来展⽰mask-image的强⼤之处。⾸先，下⾯所有案例使⽤原始图如下：我们先来⼀个最基础的png图⽚遮罩展⽰。CSS代码如下：.mask-image { width: 250px; height: 187.5px; -webkit-mask-image: url(); mask-image: url();}HTML代码如下：最后的效果，如下图所⽰：从上⾯这个最基本的案例，我们可以看出，所谓遮罩，就是原始图⽚只显⽰遮罩图⽚⾮透明的部分。例如本案例中，loading圆环有颜⾊部分就是外⾯⼀圈圆环，于是最终我们看到效果是原始图⽚，只露出了⼀个⼀个的圈圈环。并且半透明区域也准确遮罩显⽰了。因此，我们很少使⽤jpg图⽚来作为遮罩图⽚的，因为jpg图⽚⼀定是完全不透明的，最终的效果就是原图什么也看不到。另外，如果加载失败，则Firefox，Chrome浏览器下直接原始图不显⽰。接着我们再来看⼀个SVG图形遮罩效果展⽰。css代码如下：.mask-image { width: 250px; height: 187.5px; -webkit-mask-image: url(); mask-image: url();}html代码如下：最终的效果和上图相似。上⾯是将svg作为背景图来实现的，现在我们再使⽤SVG图形中
再使⽤SVG元素内联SVG的
⽆论是clip-path还是这⾥的mask，外链SVG特性的⽀持⼀定是⽐内联SVG弱的。既然Chrome浏览器连普通HTML的内联SVG的
2023年6月21日发(作者：)
CSSmask-image属性详细介绍（⼩结）CSS mask遮罩属性的历史⾮常久远了，远到⽐CSS3 border-radius等属性还要久远，最早是出现在Safari浏览器上的，差不多可以追溯到09年。不过那个时候，遮罩只能作为实验性的属性，做⼀些特效使⽤。毕竟那个年代还是IE浏览器的时代，属性虽好，但价值有限。但是如今情况却⼤有变化，除了IE和Edge浏览器不⽀持，Firefox，Chrome以及移动端等都已经全线⽀持，其实际应⽤价值已不可同⽇⽽语。尤其Firefox浏览器，从版本55开始，已经全⾯⽀持了CSS3 mask属性。并且mask属性规范已经进⼊候选推荐规范之列，会说以后进⼊既定规范标准已经是板上钉钉的事情，⼤家可以放⼼学习，将来必有⽤处。在过去，CSS mask属性在使⽤的时候就是mask: xxx，但是现在随着这个属性的规范化，mask属性实际上已经成为了诸多mask-*的缩写，这和background, border性质是⼀样的。具体是哪些属性的缩写呢，可以参见下⾯的列表：1. mask-image2. mask-mode3. mask-repeat4. mask-position5. mask-clip6. mask-origin7. mask-size8. mask-type9. mask-composite下⾯我们先来介绍 mask-image 属性的⽤法。mask-image指遮罩使⽤的图⽚资源，默认值是none，也就是⽆遮罩图⽚。因此，和border属性中的border-style属性类似，是⼀个想要有效果就必须设定的属性值。mask-image遮罩所⽀持的图⽚类型⾮常的⼴泛，可以是url()静态图⽚资源，格式包括JPG，PNG以及SVG等都是⽀持的；也可以是动态⽣成的图⽚，例如使⽤各种CSS3渐变绘制的图⽚。语法上⽀持CSS3各类渐变，以及url()功能符，image()功能符，甚⾄element()功能符。同时还⽀持多背景，因此理论上，使⽤mask-image我们可以遮罩出任意我们想要的图形，⾮常强⼤。眼见为实，我们通过⼤量案例来展⽰mask-image的强⼤之处。⾸先，下⾯所有案例使⽤原始图如下：我们先来⼀个最基础的png图⽚遮罩展⽰。CSS代码如下：.mask-image { width: 250px; height: 187.5px; -webkit-mask-image: url(); mask-image: url();}HTML代码如下：最后的效果，如下图所⽰：从上⾯这个最基本的案例，我们可以看出，所谓遮罩，就是原始图⽚只显⽰遮罩图⽚⾮透明的部分。例如本案例中，loading圆环有颜⾊部分就是外⾯⼀圈圆环，于是最终我们看到效果是原始图⽚，只露出了⼀个⼀个的圈圈环。并且半透明区域也准确遮罩显⽰了。因此，我们很少使⽤jpg图⽚来作为遮罩图⽚的，因为jpg图⽚⼀定是完全不透明的，最终的效果就是原图什么也看不到。另外，如果加载失败，则Firefox，Chrome浏览器下直接原始图不显⽰。接着我们再来看⼀个SVG图形遮罩效果展⽰。css代码如下：.mask-image { width: 250px; height: 187.5px; -webkit-mask-image: url(); mask-image: url();}html代码如下：最终的效果和上图相似。上⾯是将svg作为背景图来实现的，现在我们再使⽤SVG图形中
再使⽤SVG元素内联SVG的
⽆论是clip-path还是这⾥的mask，外链SVG特性的⽀持⼀定是⽐内联SVG弱的。既然Chrome浏览器连普通HTML的内联SVG的
发布评论