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 */mask-position: left top ; /* 0px, 0px */mask-position: 10px 15px; /* 10px, 15px */mask-position: left 15px; /* 0px, 15px */mask-position: 10px top ; /* 10px, 0px */mask-position: left top 15px; /* 0px, 15px */mask-position: left 10px top ; /* 10px, 0px */
?
?百分比(%)
? 百分比設置了遮罩圖片橫坐標和縱坐標的偏移百分比，注意偏移包括對遮罩原圖片大小的偏移，也包括遮罩圖片本身的偏移,例如-webkit-mask-position:75% 50%的偏移如圖:
?指定值：
top: 如果指定1或2個值則代表縱坐標0%,否則是指定距離上邊的偏移量
right: 如果指定1或2個值則代表橫坐標100%,否則是指定距離右邊的偏移量
bottom: 如果指定1或2個值則代表縱坐標100%,否則是指定距離下邊的偏移量
left: 如果指定1或2個值則代表橫坐標0%,否則是指定距離左邊的偏移量
center:代表50%?
body { mask: url("banner.jpeg") right top } /* 100% 0% */
body { mask: url("banner.jpeg") top center } /* 50% 0% */
body { mask: url("banner.jpeg") center } /* 50% 50% */
body { mask: url("banner.jpeg") bottom } /* 50% 100% */ -webkit-mask-position-x:?[ percentage | length | left | center | right ]?定義遮罩層的出現位置的橫坐標
-webkit-mask-position-y:?[ percentage | length | top | center | bottom ]?定義遮罩層的出現位置的縱坐標
-webkit-mask-clip:?border | padding | content | text?定義圖片遮罩延伸到的位置
?
| border | 圖片遮罩延伸到元素border |
|---|---|
| padding | 圖片遮罩延伸到元素padding |
| content | 圖片遮罩延伸到元素內容部分 |
| text | 圖片遮罩延伸到元素文字部分 |
?
-webkit-mask-composite?定義同一個元素上有多個圖片遮罩時的相對順序
?
| clear | 源圖片和目標圖片重疊的像素被清除 |
|---|---|
| copy | 源圖片替代目標圖片 |
| source-over | 源圖片呈現在目標圖片上 |
| source-in | 源圖片和目標圖片重疊的像素被源圖片替代，其他像素被清除 |
| source-out | 源圖片和目標圖片重疊的像素被清除，源圖片剩下的像素被呈現 |
| source-atop | 目標圖片被呈現。只有在重疊像素在目標圖片的不透明部分時，源圖片被呈現。這導致源圖片不起作用 |
| destination-over | 目標圖片呈現在源圖片上 |
| destination-in | 源圖片和目標圖片的重疊像素中，屬于源圖片的保留，其他像素被清除 |
| destination-out | 圖片和目標圖片的重疊像素被清除，源圖片剩余的像素被展示 |
| destination-atop | 源圖片的像素被展示。只有在重疊部分在目標圖片的不透明時。目標圖片被呈現。這導致目標圖片不起作用 |
| xor | 如果源圖片與目標圖片都透明時，重疊像素全變為透明 |
?例如:
#demo{width:930px;height:768px;margin: 50px auto;font-size: 20px;font-weight: bold;color:red;background:url(back.jpg) no-repeat;-webkit-mask-image:url(mask1.png),url(mask2.png);-webkit-mask-repeat:no-repeat; }
mask.png為源圖片，mask2為目標圖片
?
-webkit-mask-box-image?定義圖片遮罩的滾動特性.
?
| uri | 圖片路徑 |
|---|---|
| gradient | 用-webkit-gradient函數生成遮罩圖（mask image） |
| none | 沒有遮罩圖片 |
| top | 圖片離上邊緣的距離 |
| right | 圖片離右邊緣的距離 |
| bottom | 圖片離底邊緣的距離 |
| left | 圖片離左邊緣的距離 |
| x_repeat | 水平方向的重復，取值：repeat | stretch | round |
| y_repeat | 垂直方向的重復，取值：repeat | stretch | round |
?
-webkit-mask-origin?定義-webkit-mask-position值得起始位置.
?
| padding | 默認值，從padding開始計算-webkit-mask-position的值 |
|---|---|
| border | 從border開始計算-webkit-mask-position的值 |
| content | 從元素內容部分開始計算-webkit-mask-position的值 |
?
-webkit-mask-repeat?定義遮罩層的出現位置
?
| repeat | 遮罩圖片水平、垂直方向都重復 |
|---|---|
| repeat-x | 遮罩圖片只在水平方向重復 |
| repeat-y | 遮罩圖片只在垂直方向重復 |
| space | 遮蓋圖像重復的次數使其可容納在背景放置區域中，同時不經過裁剪，圖像將拉開間隔以填滿區域。 |
| round | 遮蓋圖像經過縮放，以便可放下整數個該圖像 |
| no-repeat | 遮罩圖片不重復 |
?
-webkit-mask-size?定義遮罩層的大小
?
| auto | 繼承遮罩圖的寬度和高度 |
|---|---|
| contain | 放大圖像到最大的尺寸，同時保持原有的圖像縱橫比，使得寬高完全地適應背景位置區域 |
| cover | 縮放圖像到最小的尺寸，同時保持原有的圖像縱橫比，使得寬高完全地覆蓋背景位置區域 |
| length | 浮點數，后跟絕對單位符(cm, mm, in, pt, pc)或者相對單位符 (em, ex, or px) |
| percentage | 整數，后跟百分號，百分比的值和背景位置區域有關系。 |
-webkit-mask-attachment: fixed | scroll 圖片滾動方式 fixed 不滾的 scroll滾動
?
2. 配合animation:css3的animation可以實習樣式的動態變化，通過設置animation可以實現探照燈效果:
?
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <title>探照燈例子</title> <style> body {font-size: 13px;background-color: #000; } .demo {-webkit-animation: demo-an2 5s ease-out infinite;border-radius: .4em;color: #FFFF;margin: 1em; font-size:4em;font-weight:bold;text-align: center;text-shadow: 1px 1px 0 #ccc; -webkit-mask: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,0) 20%) -500px 0 no-repeat content;width: 16em; } @-webkit-keyframes demo-an { to { -webkit-mask-position:600px 0; } } </style> </head> <body> <div class="demo">騰訊財付通，會支付會生活</div> </body></html>
??
