会用PS的童鞋一定知道“蒙版”的概念，它可以在图片上实现一定的遮罩效果，当然这里我们不介绍ps里的蒙版，而是介绍利用CSS3的新属性-webkit-mask来实现网页中的图片遮罩效果。 大家对-webkit-mask这一属性可能不太熟悉，或许有很多人都是第一次见到，没错，这一属性也是还未被众多 ...

这是一个实验中的功能，用于设置元素上遮罩层的图像。 一、Values none：默认值，透明的黑色图像层，也就是没有遮罩层。 <mask-source>：<mask>或CSS图像的url<image>图片作为遮罩层 二、语法： 三、效果图 ...

mask demo效果演示：http://dtdxrk.github.io/game/css3-demo/mask.html mask 的属性： -webkit-mask-image:url | gradient /*可以使用图片或渐变作为遮罩层 ...

渐变 线性渐变:linear gradient 语法：background: -webkit-linear-gradient( [point || angle ] , stop ,stop +） 第一个参数可以是用于设置起始点(起始边)eg:top left 或者 top ...

前不久做了一个项目，需要一个小效果，就是获取用户头像以心形的形状展现在页面上，开始小五想的实现方式是canvas画图或CSS3的clip（剪切），发现都不理想，和设计稿里的图形美观度相差太大，而且实现起来太麻烦，后来，小五采用了一个CSS3的新增属性完美的解决了这个问题，今天就来和大家分享 ...

最近在b站上看到一种弹幕效果叫做智能防挡弹幕，也就是传说中的蒙版弹幕， 打开之后效果大概是这样的 再也不用担心男神女神的绝世容颜被花里胡哨的弹幕挡住啦，是不是感觉很神奇。 实现原理其实就是类似于ps的蒙版，也就是说将图像的一部分 “隐藏”。这里我们需要用到的是css3的mask遮罩属性 ...

　　-webkit-filter是css3的一个属性，Webkit率先支持了这几个功能，感觉效果很不错。下面咱们就学习一下filter这个属性吧。 现在规范中支持的效果有： grayscale 灰度 值为0-1之间的小数 sepia 褐色 ...

先上一张咱们的原始图 rs7.jpg 如下： 一、mask-image属性 　　1.基本的png图遮罩展示 　　我们使用的遮罩图片 ad.png，如下： 　　 　　html： 　　 　　css： 　　 　　效果 ...