css模糊遮罩效果_遮罩效果 css3

CSS3提供了遮罩效果，这是以前CSS2中比较难实现的一个新特性，配合SVG或者canvas同样也可以实现遮罩效果，他的效果就如下图所示:

简单的说就是在一个层上面加一个过滤层，过滤层透明度越低，底层就显示的越多，反之，底层显示越少

1. CSS3属性

CSS3中提供的新属性有(括号为跟background对应类似的属性)：

-webkit-mask-image:设置遮罩图片地址

-webkit-mask-position: 定义遮罩层的出现位置,可以取值px或百分比，也可以指定为 top left right 和bottom

像素(px)

(1)如果只指定一个值(例如-webkit-mask-position:10px)，第二个值就会被默认为'center'效果如-webkit-mask-position:10px center

(2)如果指定两个值(-webkit-mask-position:10px 10px),第一个值就是横坐标的偏移或定位，第二个值就是纵坐标的偏移或定位,px指定遮罩图片的左上角对应于影响区域的左上角，所谓影响区域就是被遮罩图片遮罩的区域,也就是遮罩图片的大小

(3)如果指定三个值，那么每个px之前必须指定一个方向(top,left,bottom,right),例如:mask-position: bottom 10px right 20px 指定了距离底部10px，距离右边20px，如果指定了3个方向，默认值为0

例如：

mask-position: left 10px top 15px; /* 10px, 15px */

<