之前的文章《什么是CSS語法？詳細(xì)介紹使用方法及規(guī)則》中帶了解CSS語法使用方法及規(guī)則。下面本篇文章給大家分享一下使用CSS給圖片添加蒙版效果的小技巧，這個技巧很實用，可以將幫助您打破網(wǎng)站布局的模式，只需幾行代碼，快來看看吧！

添加蒙版

遮罩告訴您的瀏覽器哪些資產(chǎn)元素應(yīng)該可見，這對于構(gòu)建創(chuàng)意形狀和布局非常有用?？梢酝ㄟ^三種方式進(jìn)行遮罩使用光柵圖像（例如帶有透明部分的 PNG 格式）、CSS 漸變或 SVG 元素。

注意，與典型的光柵圖像不同，SVG 可以縮放或轉(zhuǎn)換而不會顯著降低質(zhì)量。

附代碼：

img {   mask-image: url(‘mask.png’) linear-gradient(-45deg,                         rgba(0,0,0,1) 20%, rgba(0,0,0,0) 50%);   mask-image: url(#masking); /*referencing to the element generated and defined in SVG code*/ }

值得一提的是，F(xiàn)irefox 僅支持最新版本，因此我們需要使用內(nèi)聯(lián) SVG 掩碼元素。如果我們使用具有透明度級別的光柵圖像會怎樣？圖像的透明部分不會被看到——換句話說，不透明的片段將被顯示，隱藏其他部分。 遮罩特別強(qiáng)大，因為它使您能夠?qū)⑾嗤膶傩詰?yīng)用于背景圖像，定義它們的位置、大小和重復(fù)。

前處理：

后處理：

可以使用透明度級別來剪切部分動畫圖像（例如GIF 文件），在使用這些屬性時，不要忘記跨瀏覽器支持，并添加供應(yīng)商前綴。

推薦學(xué)習(xí)：CSS視頻教程