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

相关文章

来自专栏老马寒门IT

10-移动端开发教程-移动端事件

在前端的移动Web开发中,有一部分事件只在移动端产生,如触摸相关的事件。接下来给大家简单总结一下移动端的事件。

2048
来自专栏HTML5学堂

hasLayout IE浏览器bug的来源

HTML5学堂:IE6浏览器曾经“坑”了一代又一代的前端工程师,了解浏览器兼容问题的同时,抱着“理科思维”的我们,必然会去思考为何IE6会这么“坑”,所以,我们...

2884
来自专栏Coco的专栏

神奇的选择器 `:focus-within`

有个错误有必要每次讲到伪类都提一下,有时你会发现伪类元素使用了两个冒号 (::) 而不是一个冒号 (:),这是 CSS3 规范中的一部分要求,目的是为了区分伪类...

1145
来自专栏GreenLeaves

CSS-DOM介绍

三位一体的网页: 我们在浏览器里看到的网页其实是由以下三层信息构成的一个共同体: 1、结构层: 结构层是由HTML和XHTML之类的标记语言所构成的。所就是哪些...

1668
来自专栏进步博客

深入理解视觉格式化模型( VISUAL FORMATTING MODEL)

“理论不懂就实践,实践不会就学理论”,非常赞同bluedavy的这句话。实践过程中经常会遇到某个属性的使用,浏览器渲染效果与预期效果不符,虽然通过死记硬背能避免...

1133
来自专栏前端架构

CSS3 transform对普通元素的N多渲染影响

by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wor...

662
来自专栏Material Design组件

Material Design —Tabs

34510
来自专栏互联网杂技

深入理解视觉格式化模型

“理论不懂就实践,实践不会就学理论”,非常赞同bluedavy的这句话。实践过程中经常会遇到某个属性的使用,浏览器渲染效果与预期效果不符,虽然通过死记硬背能避免...

3389
来自专栏Python攻城狮

HTML 5&CSS快速入门1.计算机中的文件2.网页组成4.HTML基础操作

超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。

973
来自专栏前端知识分享

第131天:移动web页面的排版与布局

html{  font-size:1mm;  }  .titleheight{  height:10rem; //这里等于10mm  width:11rem; ...

481

扫描关注云+社区