CSS3蒙版 — 元旦快乐!

相信大家如果对PS有所了解都知道里面有蒙版遮罩层的效果,可我们在这里并不打算介绍PS的蒙版效果,而是介绍在内核为-webkit的浏览器中通过CSS3的新属性-webkit-mask来实现在网页中。-webkit-mask这一属性相信大家并不是很熟悉,也是CSS3中一些高级且被严重低估的属性之一,很多人都是第一次见到,-webkit-mask之所以不常见,主要是还未被众多浏览器所支持,目前支持这一属性仅有-webkit-前缀的浏览器,但是相信不久的将来支持这一属性的浏览器会越来越多。

本文主要内容

1.-webkit-mask基本介绍

2.-webkit-mask图片蒙版

3.-webkit-mask渐变蒙版

4.-webkit-mask的其它属性

1.-webkit-mask的基本介绍

为了得到特殊的显示效果,通常在遮罩层上创建一个任意形状的“视窗”,遮罩层下方的对象可以通过该“视窗”显示出来,而“视窗”之外的对象将不会显示,mask便是创建这样一个遮罩层。现在我们一起来看看,先给波效果图。

其中心形为mask蒙版遮罩层,心形后面为背景图,是如何把背景以心形的形状展现出来的呢?现在我们一起来看看mask图片蒙版的实现方法。

2.-webkit-mask图片蒙版

-webkit-mask这个属性相当强大,它非常值得深入研究,因为它可以在实际应用中为你省掉很来时间。让一个元素添加蒙版成为了可能,从而你可以创建任何形状且有创意的花样,蒙版可以是半透明或者全透明的的png图片。如下例所示:

背景图片:

蒙版图片:

HTML代码:

<body>
   <div class="mask">
   </div>
</body>

CSS样式:

<style type="text/css">
 .mask {
     width: 320px;
     height: 320px;
     margin: 100px auto;

     background: url('mj.png');// 背景图片
     -webkit-mask: url("c.png");// 蒙版图片
  }
</style>

3.-webkit-mask渐变蒙版

-webkit-mask的蒙版层不仅仅可以通过png图片来实现,还可以使用它的alpha值来控制;

ps: alpha为透明度,即为rgba(0, 0, 0, 1)中的1;

alpha值为0时,覆盖图片下的内容;

alpha值为1时,完全显示下面的内容;

CSS样式:

.mask {
     width: 320px;
     height: 320px;
     background: url('mj.png');
     -webkit-mask : -webkit-gradient(linear, left top, right bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
     margin: 100px auto;
}

效果如下:

4.mask的其它属性

mask的属性有-webkit-mask-clip、 -webkit-mask-position 和-webkit-mask-repeat、 -webkit-mask-image等,且mask属性严重依赖于background中的语法,大家完全可以按照background的语法形式去控制蒙版图片。

如:

background-position: x y; //控制背景图片位置
-webkit-mask-positon: x y; //控制遮罩层位置

小结

这各位看官切记,除了webkit的浏览器外其他浏览器不支持,如果对浏览器兼容性要求很高的话请慎重使用,本着对新知识的渴求与扩展,咱们知道总比不知道的好。

其次本文中的渐变模版有运用到CSS3的线性渐变,为了深入了解,下周主要为大家介绍CSS3的Gradient,即线性渐变与径向渐变,一个高逼格的进阶知识。

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2017-01-02

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏腾讯社交用户体验设计

带你轻松打开svg滤镜的大门

1233
来自专栏HT

HTML5版的String Avoider小游戏

HTML5版的String Avoider小游戏 http://www.newgrounds.com/portal/view/300760 蛮简单也蛮考验耐心,...

2318
来自专栏IMWeb前端团队

网格系统 CSS Grid Layout

听闻w3cplus大漠在第三届CSS Conf上的演讲主题是CSS Grid Layout,吓得我赶紧抛下红尘俗事闭门谢客苦心钻研,唯恐脚步太慢,遥望大漠一骑绝...

2188
来自专栏前端说吧

CSS3-transform变形功能

2225
来自专栏IMWeb前端团队

css3的学习笔记

适合初学者以及没看过css3的人快速了解css3的主要内容。 1.opacity ----------------------取值0-1之间,给整个元素和...

1895
来自专栏小灰灰

cocos2dx-v3.4 2048(四):单元格的设计与实现

前言 ---- 单元格即显示2、4、8等数字的不同颜色的方格,如下图。本项目中Grid类实现单元格的相关内容,包括数字、背景更新,移动、新增、消除特效 ? ...

2056
来自专栏tkokof 的技术,小趣及杂念

HGE系列之九 管中窥豹(精灵动画)

这次的HGE之旅,让我们来看看精灵及动画的实现,毕竟对于一款2D游戏引擎来说,恐怕精灵和动画不是最重要的,也可算是最重要之一了吧:)

952
来自专栏姬小光

姬小光前端小讲堂【第003期】

在上一期的代码中,我们用到 h1,p,a 等标签,这些标签确定了我们想在网页中展示一个标题,一个段落,和一个链接。

791
来自专栏刘望舒

几条曲线构建Android表白程序

每年的情人节和七夕,甜蜜与痛苦的日子,做点什么好呢? 写诗画画送礼物,逛街吃饭看电影? 作为搬砖爱好者,写个表白脚本或者动画什么的吧。 想起之前看到的一段H5动...

1153
来自专栏葡萄城控件技术团队

使用CSS 3创建不规则图形

前言 CSS 创建复杂图形的技术即将会被广泛支持,并且应用到实际项目中。本篇文章的目的是为大家开启它的冰山一角。我希望这篇文章能让你对不规则图形有一个初步的了解...

24910

扫码关注云+社区

领取腾讯云代金券