css

聊一聊 CSS魔法属性 mask~

Posted by 苏南 on September 26, 2018

前言

  知识往往随时间淡忘,沉浸在开发中时间长了,发现好些知识已经又模糊了,一些很好用的属性/事物或人,其本身就有,却忘了,然后绕个大圈子自己实现了一套,究其原因,还是因为一开始没有掌握牢固和透彻吧(不过其实再透彻、你长时间不还是会忘的,哈哈~)。

  周末闲逛github看到之前17年左右分享的一个react+redux的实例,当时用mask做了封面特效,才突然想起CSS原来还有 mask 这么一个属性,蛮神奇的,于是想着简单分享一下。

在这之前你是否听说过或用过 CSS3 Mask 这个属性呢?欢迎在底部评论区留言,一起探讨呢。

什么是mask?

  mask翻译过来遮罩的意思,可能我们平时项目中也有用到mask,即弹窗的蒙版层,但此mask非彼mask哦~

  css遮罩(mask)是2008年4月由苹果公司添加到webkit引擎中的。遮罩提供一种基于像素级别的,可以控制元素透明度的能力,类似于png24位或png32位中的alpha透明通道的效果。

大约2012年11月中旬左右,遮罩(Mask)第一次出现在W3C公布的草案中。但是跟苹果公司的是不同的版本。

当下已经2019了,css mask的历史可以说是很久远了,甚至比我们天天都宠幸的border-radius还要悠久,说实话工作中我基本没有用到过它(mask),今天再次复习了下,感慨内心无比愧疚,很强大的一个东西,自己竟然将它遗忘,跪键盘一晚都不为过~

mask介绍?

都说好用的东西 兼容性不好,来张图看看吧

本文由@IT·平头哥联盟-首席填坑官 苏南分享,React,缓冲动画,缓冲运动函数,转盘抽奖,Partial support in WebKit/Blink browsers refers to supporting the mask-image and mask-box-image properties, but lacking support for other parts of the spec.2 Partial support in Firefox refers to only support for inline SVG mask elements i.e. mask: url(#foo).3 Partial support refers to supporting the mask-box-image shorthand but not the longhand properties,4 Can be enabled in MS edge behind the "Enable CSS Masking" flag.5 Partial support refers to supporting mask-image and mask-size,6 Partial support refers to supporting mask-image, mask-size, mask-position, mask-repeat and mask-composite,7 Edge also recognizes and supports all the -webkit- prefixed equivalents of the unprefixed properties for site compatibility

好吧,完全支持的并不多,但连Edge浏览器都支持部分了,略感意外,部分支持说明未来会支持的更好,并影响我们对知识吸取的渴望。

属性列表:

  • mask-border
  • mask-clip
  • mask-composite
  • mask-image
  • mask-mode
  • mask-origin
  • mask-position
  • mask-repeat
  • mask-size
  • mask-type

属性详细说明:https://developer.mozilla.org/en-US/docs/Web/CSS/mask

mask 语法

对 mask 的一定了解的同学应该知道,mask的一些属性值,跟我们平时用的background很像,如:

ps:不会对api做使用说明,请自行查看文档

  • *-image:url(../xx.png);
  • *-size:10px 10px;
  • *-repeat:no-repeat;
  • *-position:0 -20px; …………

说了这么多来,看个实例吧:

本文由@IT·平头哥联盟-首席填坑官 苏南分享,React,缓冲动画,缓冲运动函数,转盘抽奖,Partial support in WebKit/Blink browsers refers to supporting the mask-image and mask-box-image properties, but lacking support for other parts of the spec.2 Partial support in Firefox refers to only support for inline SVG mask elements i.e. mask: url(#foo).3 Partial support refers to supporting the mask-box-image shorthand but not the longhand properties,4 Can be enabled in MS edge behind the "Enable CSS Masking" flag.5 Partial support refers to supporting mask-image and mask-size,6 Partial support refers to supporting mask-image, mask-size, mask-position, mask-repeat and mask-composite,7 Edge also recognizes and supports all the -webkit- prefixed equivalents of the unprefixed properties for site compatibility

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.img-border{
  display:inline-block;
  border:2px solid #fff;
  background: #d8d8d8;
}

img{
                
  width:300px;
  mask-image: url('https://www.zhangxinxu.com/study/201711/star.svg');
  -webkit-mask-image:url('https://www.zhangxinxu.com/study/201711/star.svg');
  mask-repeat:no-repeat;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:50% 50%;
  -webkit-mask-size:100px 92px;
}

<span class="img-border">
  <img src="https://img-blog.csdnimg.cn/20181116123640144.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI1NDc2Ng==,size_16,color_FFFFFF,t_70"/>
</span>

看着跟 css sprite 很像吧,但又有些区别,sprite在于某个元素只是展示一张大背景图的某区域,mask在于把img大图全遮住,只显示mask-images元素的大小,刚好相反,严格意义来说,PhotoShop里的蒙版跟它是一个原理。

实践


@IT·平头哥联盟-首席填坑官·苏南
扫码关注公众号,获取更多学习资源

(转载本站文章请注明作者和出处 首席填坑官-苏南的博客

作者:苏南 - 首席填坑官
本文链接:https://www.susouth.com/css/2018/09/26/css-mask/
交流群:912594095、公众号:honeyBadger8
本文原创,著作权归作者所有。商业转载请联系首席填坑官-苏南获得授权,非商业转载请注明原链接及出处。
阿里云1023 国内首家采用 amd EPYC™霄龙处理器的实例,业界领先的性价比,0.57元/天起
宝剑锋从磨砺出,梅花香自苦寒来,用心分享,一起成长,做有温度的攻城狮!