CSS 遮罩填充是指在 HTML 元素上疊加一層遮罩，以實現特定的填充效果。在這里，我們將探討如何使用 CSS 遮罩填充來實現不同的填充效果。

首先，讓我們來看一下如何使用 CSS 遮罩填充來實現全透明的填充效果。代碼如下：

.transparent-fill {
background-image: linear-gradient(to bottom, transparent, transparent);
-webkit-mask-image: linear-gradient(to bottom, black, black);
mask-image: linear-gradient(to bottom, black, black);
}

通過設置透明的背景圖和 black 的遮罩圖，我們就可以實現一個全透明的填充效果。值得注意的是，這里使用了 -webkit-mask-image 和 mask-image 兩個 CSS 屬性，它們分別為 Safari 和 Chrome 及其他現代瀏覽器提供了瀏覽器兼容性。

接下來，讓我們來看一下如何使用 CSS 遮罩填充來實現漸變的填充效果。代碼如下：

.gradient-fill {
background-image: linear-gradient(to bottom, #fff, #eee);
-webkit-mask-image: linear-gradient(to bottom, #000, #000);
mask-image: linear-gradient(to bottom, #000, #000);
}

通過設置不同顏色的背景圖和 black 的遮罩圖，我們就可以實現一個漸變的填充效果。

最后，讓我們來看一下如何使用 CSS 遮罩填充來實現圖像填充效果。代碼如下：

.image-fill {
background-image: url('path/to/image.jpg');
-webkit-mask-image: url('path/to/mask-image.png');
mask-image: url('path/to/mask-image.png');
}

通過設置圖像背景和對應的遮罩圖像，我們就可以實現一個圖像填充效果。使用圖像填充時，遮罩圖像應該是一個灰度圖像，黑色表示完全不透明，白色表示完全透明。

以上是使用 CSS 遮罩填充實現不同效果的基本方法。希望這篇文章能夠幫助到你學習 CSS 遮罩填充技術。