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

添加蒙版

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

注意，與典型的光柵圖像不同，SVG 可以縮放或轉(zhuǎn)換而不會(huì)顯著降低質(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 掩碼元素。如果我們使用具有透明度級(jí)別的光柵圖像會(huì)怎樣？圖像的透明部分不會(huì)被看到——換句話說(shuō)，不透明的片段將被顯示，隱藏其他部分。 遮罩特別強(qiáng)大，因?yàn)樗鼓軌驅(qū)⑾嗤膶傩詰?yīng)用于背景圖像，定義它們的位置、大小和重復(fù)。

前處理：

后處理：

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

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