以Webkit为核心的浏览器的CSS样式-----Mask

 

以Webkit为核心的浏览器的CSS样式-----Masks

-webkit-mask这个属性的作用如果熟悉Flash的话就知道有个“遮罩层”的东西，也就是如果根据遮罩层的颜色的深浅来显示位于遮罩层下方的图像，在这里的话，-webkit-mask是采用opacity透明度来实现遮罩的，如果透明度为1则显示，透明度为0则不显示，介于0-1之间则呈现相应的透明度

-webkit-mask也是一个复合属性，语法如下：

-webkit-mask:attachment, clip, origin, image, repeat, composite, box-image;

也就是说这个属性可以分解成如下的几个属性：

（1）-webkit-mask-attachment 设置遮罩图片是否随页面滚动

【语法】：-webkit-mask-attachment: fixed | scroll

fixed表示图片不随页面滚动，scroll则表示图片随页面滚动，但是很不幸没有测试成功，API上倒是

提了一句说是Apple Extension，原以为是iphone上的safari才可以显示，但是用ipod测试了一下也没有看

到效果。还有待研究

（2）-webkit-mask-clip 关于这个属性，safari的API也没有做太多的解释，只是说用于阐述mask的效果是否扩展到

边框上，但是对于这个属性的值没有过多的介绍。很遗憾！

（3）-webkit-mask-origin 设置遮罩的位置 ，这个属性决定了-webkit-mask-position的起点，

有三个值padding border content

【语法】-webkit-mask-origin: padding | border | content

padding ---- mask的位置从元素padding的左上角开始

border-------mask的位置从元素的border的左上角开始

content------mask的位置从元素的实际内容的左上角开始

（4）-webkit-mask-image 设置用于遮罩的图片

【语法】-webkit-mask-image:url;

（5）-webkit-mask-repeat 设置遮罩的方式

【语法】-webkit-mask-repeat: stretch(默认) | round | repeat

（6）-webkit-mask-composite 设置遮罩的混合模式

【语法】-webkit-mask-composite: border(默认) | padding

border ----表示背景会延伸到边跨区域

padding---表示背景只会延伸到padding区域

（7）-webkit-mask-box-image 该属性的作用有点像拼图的作用，举一个例子说明。

【语法】：-webkit-mask-box-image：url top right bottom left x-repeat y-repeat;

【参数】:url 表示使用的图片

top right bottom left 分别表示的是针对url里图片的裁切位置，可以为像素（为像素时不能带px单位）和百

分比，而且这个属性设置和平时设置的不一样，如果top right bottom left中没有设置值的就默认为0像素

如果接触过CSS3里的border-image就可以比较容易的理解这个属性的用法了，但是
-webkit-mask-box-image这个属性的用法 其实又是有点区别的。举一个例子来描述

3.jpg

soul.png(这是一张具有透明背景的图片)

<img src="3.jpg" style="background:red;border:1px solid red;-webkit-mask-box-image: url(soul.png) 90 90 90 90 stretch;"/>

效果如图

top是指从上到下的切取，right为从右往做切取，bottom为从下往上切取，left为从左向右切取，这样就会导致四个角的部分会出现重复的部分，而不是像border-image那样分成没有重复区域的九宫格

根据图示，用于遮罩的图片就是以九宫格的形式来截取的，四个角top-left,top-right,bottom-left,bottom-right不变，top、right、bottom、left四边根据设置的x-repeat，y-repeat的设置进行平铺，重复或者拉伸，中间区域（）

x-repeat y-repeat 表示的是x方向 y方向的图片呈现方式（repeat stretch round 默认为stretch）