IT兄弟連 HTML5教程 CSS3屬性特效 遮罩

 

CSS遮罩提供一種基於像素級別的，能夠控制元素透明度的能力，相似於png24位或png32位中的alpha透明通道的效果。遮罩有三個屬性能夠設置，分別是mask-image、mask-position、mask-repeat。

首先咱們須要一個合適的遮罩圖片。在ps裏操做很簡單，製做步驟以下：

1．打開你想要做爲遮罩的透明png24的圖片

2．選擇圖層菜單，而後圖層樣式最後是顏色疊加

3.在顏色疊加對話框裏面改變顏色值爲白色

4.點擊ok關閉對話框

5.選擇文件菜單，保存爲web，替換舊的圖片

執行上面的5個步驟，咱們使用ps製成了一個五邊形，以下圖：

 

下例是一個簡單遮罩的例子，爲一個div設置一張背景圖，再增長上圖的遮罩，代碼以下：

 

該div的遮罩圖片爲「mask.png」且不重複，遮罩圖片的位置在「50% 50%」，在瀏覽器裏的執行結果如圖1：

圖1  CSS3遮罩