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

相关文章

来自专栏非典型技术宅

Quartz2D进行渲染1. 渲染模式2. even-odd rule:奇偶填充规则3. nonzero winding number rule:非零绕数规则4. 其他会用到的渲染模式5. 混合模式

823
来自专栏向治洪

Android开发之Path详解

在制作高级控件的时候往往会用到很多的高级数学公式,例如本文将要讲到的贝塞尔曲线,结合Path使用,可以实现很多复杂的动画效果。 一.Path常用方法表 作...

3035
来自专栏小轻论坛

一些实用的Photoshop快捷键

将所选文本的文字大小减小10 点像素 【Ctrl】+【Alt】+【Shift】+【<】

863
来自专栏小灰灰

zxing二维码生成服务之深度定制

二维码生成服务之深度定制 之前写了一篇二维码服务定制的博文,现在则在之前的基础上,再进一步,花样的实现深度定制的需求,我们的目标是二维码上的一切都是可以由用户...

3516
来自专栏京东技术

服务器端的图像处理 | 请召唤ImageMagick助你解忧

在客户端我们可以用 PhotoShop 等 GUI 工具处理静态图片或者动态 GIF 图片,不过在服务器端对于 WEB 应用程序要处理图片格式转换,缩放裁剪,翻...

921
来自专栏图形学与OpenGL

机械版CG 实验4 裁剪

了解二维图形裁剪的原理(点的裁剪、直线的裁剪、多边形的裁剪),利用VC+OpenGL实现直线的裁剪算法。

991
来自专栏Android-薛之涛

Android-.9图详解

Android设备适配,图片方面很重要的一部分就是.9图的使用了,我们今天就来记录一下。

822
来自专栏java工会

Java能写外挂吗?那就写个跳一跳辅助程序吧

##起初是想使用按键精灵脚本程序控制,但还是选择熟悉的java。我这里使用了工具,造成延迟问题。也求教:java控制安卓的正确姿势,

1930
来自专栏前端说吧

echarts - 特殊需求实现代码汇总之【线图】篇

继7月24的echarts-柱图配置汇总后,echarts特殊配置连载第四篇 之 线图终于也被我这个懒家伙放出来了!

1183
来自专栏前端杂货铺

使用canvas截图或者改变灰度

简述 html5新添加的canvas API可以让我们对画布进行开发应用,典型的是可以使用canvas截图或者 手工绘制“迷你图”(即嵌入在文本中的高清小图片)...

3308

扫码关注云+社区