#45 CSS 中的半透明遮罩 mask，實現各種模糊邊緣特效
Y
Chief Designer @HealthyPlate
⚠️ 本篇文章已搬遷至 css.im1010ioio.dev，請至新站閱讀完整版。
前幾篇寫到 CSS clip-path 時，可以剪裁任何 HTML 的元素，包含色塊、圖片、影片，但是他只限於精準的剪裁線條，萬一今天要有更複雜而且半透明的剪裁呢？
例如，我今天想要 LOGO 上面有個手印被裁掉，同時又有點半透明效果：
這時候就可以使用 CSS 的 mask 屬性，再加上一張裁剪用的半透明圖檔，做到我們要的效果，這幾乎跟 Photoshop 中的剪裁遮色片效果一模一樣。我覺得這種效果特別適合用在復古、恐怖或懸疑效果的網頁裡。
↓ 今日學習重點 ↓
學會 CSS 遮罩
mask的用法了解
mask-mode常用兩種模式下的差異
一、基本語法
這個 mask 屬性允許你使用圖片或漸層來遮罩 HTML 元素的部分區域，實現透明、半透明的效果。在預設 mask-mode 為 alpha 時，它會根據「遮罩圖片的透明度」來決定是否顯示畫面…
545 views
