• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

CSS mask-image属性详细介绍

CSS3 web前端中文站 2年前 (2017-11-17) 819次浏览 未收录 0个评论

CSS mask 遮罩属性的历史非常久远了,远到比 CSS3 border-radius 等属性还要久远,最早是出现在 Safari 浏览器上的,差不多可以追溯到 09 年。

更多精彩内容请看 web 前端中文站
http://www.lisa33xiaoq.net 可按 Ctrl + D 进行收藏

不过那个时候,遮罩只能作为实验性的属性,做一些特效使用。毕竟那个年代还是 IE 浏览器的时代,属性虽好,但价值有限。

但是如今情况却大有变化,除了 IE 和 Edge 浏览器不支持,Firefox,Chrome 以及移动端等都已经全线支持,其实际应用价值已不可同日而语。尤其 Firefox 浏览器,从版本 55 开始,已经全面支持了 CSS3 mask 属性。并且 mask 属性规范已经进入候选推荐规范之列,会说以后进入既定规范标准已经是板上钉钉的事情,大家可以放心学习,将来必有用处。

CSS mask-image 属性详细介绍

在过去,CSS mask 属性在使用的时候就是 mask: xxx,但是现在随着这个属性的规范化,mask 属性实际上已经成为了诸多 mask-*的缩写,这和 background, border 性质是一样的。

具体是哪些属性的缩写呢,可以参见下面的列表:

  • mask-image
  • mask-mode
  • mask-repeat
  • mask-position
  • mask-clip
  • mask-origin
  • mask-size
  • mask-type
  • 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的强大之处。

首先,下面所有案例使用原始图如下:

CSS mask-image 属性详细介绍

我们先来一个最基础的 png 图片遮罩展示。

CSS 代码如下:

 .mask-image {     
 width: 250px; height: 187.5px;     
 -webkit-mask-image: url(loading.png);     
 mask-image: url(loading.png); }

HTML 代码如下:

 <img src="ps1.jpg" class="mask-image">

最后的效果,如下图所示:

CSS mask-image 属性详细介绍

从上面这个最基本的案例,我们可以看出,所谓遮罩,就是原始图片只显示遮罩图片非透明的部分。例如本案例中,loading 圆环有颜色部分就是外面一圈圆环,于是最终我们看到效果是原始图片,只露出了一个一个的圈圈环。并且半透明区域也准确遮罩显示了。

因此,我们很少使用 jpg 图片来作为遮罩图片的,因为 jpg 图片一定是完全不透明的,最终的效果就是原图什么也看不到。

另外,如果 loading.png 加载失败,则 Firefox,Chrome 浏览器下直接原始图不显示。

接着我们再来看一个SVG图形遮罩效果展示。

css 代码如下:

 .mask-image {     
 width: 250px; height: 187.5px;     
 -webkit-mask-image: url(star.svg);     
 mask-image: url(star.svg); }

html 代码如下:

 <img src="ps1.jpg" class="mask-image">

最终的效果和上图相似。

上面是将 svg 作为背景图来实现的,现在我们再使用SVG图形中<mask>元素作为遮罩元素来实现它。

CSS 代码如下:

 .mask-image {    
  width: 250px; height: 187.5px;     
 -webkit-mask-image: url(#mask);     
 mask-image: url(#mask);     
 /* Firefox 外链也支持 */     
 /* mask-image: url(ellipse-rect.svg#mask); */ }

html 代码如下:

 <svg>     
 <defs>             
 <mask id="mask" maskContentUnits="objectBoundingBox">             
 <!-- 柔化边缘 -->             
 <ellipse cx=".5" cy=".5" rx=".48" ry=".28" fill="black"></ellipse>             
 <rect x=".2" y="0" width=".6" height="1" rx=".1" ry=".1" fill="black"></rect>             
 <!-- 主体遮罩 www.lisa33xiaoq.net -->             
 <ellipse cx=".5" cy=".5" rx=".4" ry=".2" fill="white"></ellipse>             
 <rect x=".3" y=".1" width=".4" height=".8" rx=".1" ry=".1" fill="white">
 </rect>         
 </mask>     
 </defs>     
 </svg> 
 <img src="ps1.jpg" class="mask-image">

再使用SVG元素内联SVG的<mask>,看下面的实现。

CSS 代码:

 .mask-image {     
 width: 250px; height: 187.5px;     
 -webkit-mask-image: url(#mask);    
 mask: url(#mask);     
 mask-image: url(#mask);     
 /* Firefox 外链也支持 */     
 /* mask-image: url(ellipse-rect.svg#mask); */ }

SVG实现的代码:

 <svg>     
 <defs>             
 <mask id="mask" maskContentUnits="objectBoundingBox">             
 <!-- 柔化边缘 www.lisa33xiaoq.net-->             
 <ellipse cx=".5" cy=".5" rx=".48" ry=".28" fill="black"></ellipse>             
 <rect x=".2" y="0" width=".6" height="1" rx=".1" ry=".1" fill="black"></rect>             
 <!-- 主体遮罩 -->             
 <ellipse cx=".5" cy=".5" rx=".4" ry=".2" fill="white"></ellipse>             
 <rect x=".3" y=".1" width=".4" height=".8" rx=".1" ry=".1" fill="white"></rect>         
 </mask>     
 </defs>     
 </svg> 
 <svg width="250" height="186">     
 <image xlink:href="ps1.jpg" class="mask-image" width="250" height="186">
 </image> 
 </svg>

无论是 clip-path 还是这里的 mask,外链SVG特性的支持一定是比内联 SVG 弱的。既然 Chrome 浏览器连普通 HTML 的内联 SVG 的<mask>都不支持,自然肯定不支持这里的外链 SVG 文件<mask>元素的遮罩支持。

那之前表现良好的 Firefox 浏览器呢?

比较幸运,Firefox 浏览器最近支持了任意元素外链 SVG 文件的<mask>,为什么说最近呢?我看了下我现在的 Firefox,显示最新版,版本是 56,然后 Firefox 支持任意元素可以使用外链 SVG <mask>元素作为遮罩是版本 55 开始了。

至于上面的,任意元素内联 SVG <mask>的支持,Firefox 很早就已经支持。

相信不久的版本,Chrome 浏览器也会对其进行支持的,可以耐心等待。

【注:本文源自网络文章资源,由站长整理发布】


web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:CSS mask-image 属性详细介绍
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址