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 条评论
登录 后参与评论

相关文章

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

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

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

912
来自专栏Crossin的编程教室

【编程课堂】海龟作图

0、前言 turtle 是 python 内置的一个比较有趣味的模块,俗称 海龟作图,它是基于 tkinter 模块打造,提供一些简单的绘图工具,海龟作图最初...

4046
来自专栏Coco的专栏

【CSS进阶】试试酷炫的 3D 视角

1092
来自专栏阮一峰的网络日志

CSS中背景图片定位方法

上面这三句语句,都将图片定位在背景的左上角,表面上看效果是一样的,实际上第三种定位机制与前两种完全不同。

1581
来自专栏Thinks

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

上次和大家一起,用最简单直白,轻松粗暴的方式学习了一遍SVG动画,这次我们再一起来搞点不一样的东西,SVG滤镜的实现。

1372
来自专栏IMWeb前端团队

网格系统 CSS Grid Layout

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

2088
来自专栏小灰灰

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

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

1946
来自专栏练小习的专栏

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

上次和大家一起,用最简单直白,轻松粗暴的方式学习了一遍SVG动画,这次我们再一起来搞点不一样的东西,SVG滤镜的实现。 SVG滤镜绝对称得上是他最强大的功能之一...

2038
来自专栏刘望舒

几条曲线构建Android表白程序

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

913
来自专栏HT

HTML5版的String Avoider小游戏

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

2138

扫码关注云+社区