CSS的mask-image屬性詳解

這次給大家帶來CSS的mask-image屬性詳解，使用CSS的mask-image屬性注意事項有哪些，下面就是實戰案例，一起來看一下。

CSS mask遮罩屬性的曆史非常久遠了，遠到比CSS3 border-radius等屬性還要久遠，最早是出現在Safari瀏覽器上的，差不多可以追溯到09年。

不過那個時候，遮罩只能作為實驗性的屬性，做一些特效使用。畢竟那個年代還是IE瀏覽器的時代，屬性雖好，但價值有限。

但是如今情況卻大有變化，除了IE和Edge瀏覽器不支援，Firefox，Chrome以及移動端等都已經全線支援，其實際應用價值已不可同日而語。尤其Firefox瀏覽器，從版本55開始，已經全面支援了CSS3 mask屬性。並且mask屬性規範已經進入候選推薦規範之列，會說以後進入既定規範標準已經是板上DingTalk的事情，大家可以放心學習，將來必有用處。

在過去，CSS mask屬性在使用的時候就是mask: xxx，但是現在隨著這個屬性的正常化，mask屬性實際上已經成為了諸多mask-*的縮寫，這和background, border性質是一樣的。

具體是哪些屬性的縮寫呢，可以參見下面的列表：

1. mask-image

2. mask-mode

3. mask-repeat

4. mask-position

5. mask-clip

6. mask-origin

7. mask-size

8. mask-type

9. mask-composite

下面我們先來介紹 mask-image 屬性的用法。

mask-image指遮罩使用的圖片資源，預設值是none，也就是無遮罩圖片。因此，和border屬性中的border-style屬性類似，是一個想要有效果就必須設定的屬性值。

mask-image遮罩所支援的圖片類型非常的廣泛，可以是url()靜態圖片資源，格式包括JPG，PNG以及SVG等都是支援的；也可以是動態產生的圖片，例如使用各種CSS3漸層繪製的圖片。文法上支援CSS3各類漸層，以及url()功能符，image()功能符，甚至element()功能符。同時還支援多背景，因此理論上，使用mask-image我們可以遮罩出任意我們想要的圖形，非常強大。

眼見為實，我們通過大量案例來展示mask-image的強大之處。

首先，下面所有案例使用原始圖如下：

我們先來一個最基礎的png圖片遮罩展示。

CSS代碼如下：

.mask-image {    width: 250px; height: 187.5px;    -webkit-mask-image: url(loading.png);    mask-image: url(loading.png);}

HTML代碼如下：

<img src="ps1.jpg" class="mask-image">

最後的效果，如所示：

從上面這個最基本的案例，我們可以看出，所謂遮罩，就是原始圖片只顯示遮罩圖片非透明的部分。例如本案例中，loading圓環有顏色部分就是外面一圈圓環，於是最終我們看到效果是原始圖片，只露出了一個一個的圈圈環。並且半透明地區也準確遮罩顯示了。

因此，我們很少使用jpg圖片來作為遮罩圖片的，因為jpg圖片一定是完全不透明的，最終的效果就是原圖什麼也看不到。

另外，如果loading.png載入失敗，則Firefox，Chrome瀏覽器下直接原始圖不顯示。

接著我們再來看一個SVG圖形遮罩效果展示。

css代碼如下：

.mask-image {    width: 250px; height: 187.5px;    -webkit-mask-image: url(star.svg);    mask-image: url(star.svg);}

html代碼如下：

<img src="ps1.jpg" class="mask-image">

最終的效果和相似。

上面是將svg作為背景圖來實現的，現在我們再使用SVG圖形中<mask>元素作為遮罩元素來實現它。

CSS 代碼如下：

.mask-image {    width: 250px; height: 187.5px;    -webkit-mask-image: url(#mask);    mask-image: url(#mask);    /* Firefox外鏈也支援 */    /* mask-image: url(ellipse-rect.svg#mask); */}

html代碼如下：

<svg>    <defs>           <mask id="mask" maskContentUnits="objectBoundingBox">            <!-- 柔邊 -->            <ellipse cx=".5" cy=".5" rx=".48" ry=".28" fill="black"></ellipse>            <rect x=".2" y="0" width=".6" height="1" rx=".1" ry=".1" fill="black"></rect>            <!-- 主體遮罩 www.xttblog.com -->            <ellipse cx=".5" cy=".5" rx=".4" ry=".2" fill="white"></ellipse>            <rect x=".3" y=".1" width=".4" height=".8" rx=".1" ry=".1" fill="white"></rect>        </mask>    </defs>   </svg><img src="ps1.jpg" class="mask-image">

再使用SVG元素內聯SVG的<mask>，看下面的實現。

CSS 代碼：

.mask-image {    width: 250px; height: 187.5px;    -webkit-mask-image: url(#mask);    mask: url(#mask);    mask-image: url(#mask);    /* Firefox外鏈也支援 */    /* mask-image: url(ellipse-rect.svg#mask); */}

SVG實現的代碼：

<svg>    <defs>           <mask id="mask" maskContentUnits="objectBoundingBox">            <!-- 柔邊 www.xttblog.com-->            <ellipse cx=".5" cy=".5" rx=".48" ry=".28" fill="black"></ellipse>            <rect x=".2" y="0" width=".6" height="1" rx=".1" ry=".1" fill="black"></rect>            <!-- 主體遮罩 -->            <ellipse cx=".5" cy=".5" rx=".4" ry=".2" fill="white"></ellipse>            <rect x=".3" y=".1" width=".4" height=".8" rx=".1" ry=".1" fill="white"></rect>        </mask>    </defs>   </svg><svg width="250" height="186">    <image xlink:href="ps1.jpg" class="mask-image" width="250" height="186"></image></svg>

無論是clip-path還是這裡的mask，外鏈SVG特性的支援一定是比內聯SVG弱的。既然Chrome瀏覽器連普通HTML的內聯SVG的<mask>都不支援，自然肯定不支援這裡的外鏈SVG檔案<mask>元素的遮罩支援。

那之前表現良好的Firefox瀏覽器呢？

比較幸運，Firefox瀏覽器最近支援了任意元素外鏈SVG檔案的<mask>，為什麼說最近呢？我看了下我現在的Firefox，顯示最新版，版本是56，然後Firefox支援任意元素可以使用外鏈SVG <mask>元素作為遮罩是版本55開始了。

至於上面的，任意元素內聯SVG <mask>的支援，Firefox很早就已經支援。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

hover選取器如何使用

css3的新單位使用詳解

CSS做出圖片背景填充的六邊形