css技巧：怎麼為圖片加上蒙版（分享）

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

新增蒙版

遮罩告訴您的瀏覽器哪些資產元素應該可見，這對於建立創意形狀和佈局非常有用。遮罩可透過三種方式進行遮罩使用光柵影像（例如具有透明部分的 PNG 格式）、CSS 漸層或 SVG 元素。  

注意，與典型的光柵影像不同，SVG 可以縮放或轉換而不會顯著降低品質。

附程式碼：

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*/
}

值得一提的是，Firefox 僅支援最新版本，因此我們需要使用內嵌 SVG 遮罩元素。如果我們使用具有透明度等級的光柵影像會怎麼樣？影像的透明部分不會被看到——換句話說，不透明的片段將被顯示，隱藏其他部分。  遮罩特別強大，因為它使您能夠將相同的屬性應用於背景影像，定義它們的位置、大小和重複。

前處理：

#後處理：

#可以使用透明度等級來剪下部分動畫圖像（例如GIF 檔案），在使用這些屬性時，不要忘記跨瀏覽器支持，並添加供應商前綴。

推薦學習：CSS影片教學

以上是css技巧：怎麼為圖片加上蒙版（分享）的詳細內容。更多資訊請關注PHP中文網其他相關文章！