CSS 掩膜 - mask

你好，未來的 CSS 大師們！今天，我們將要深入 CSS 掩膜的迷人世界。想像你是一名魔術師，想要讓你的網頁部分內容消失或以有趣的方式呈現。這正是 CSS 掩膜能夠讓我們做到的！所以，讓我們戴上魔術師的帽子，學習一些 CSS 技巧吧！

CSS 掩膜是什麼？

CSS 掩膜就像在你的網頁元素上使用一個無形的模板。它允許你基於另一個圖像或形狀來隱藏或部分顯示元素的某些部分。這是一種強大的技術，可以創造出一些非常酷的效果！

可能的值

在我們開始編碼之前，讓我們看看我們可以在 mask 屬性中使用哪些不同的值。將這些想像成不同類型的魔法棒，每個都會創造出一個獨特的效果：

值	描述
none	沒有應用掩膜
<mask-reference>	指向一個掩膜圖像
<masking-mode>	調整掩膜的應用方式
<position>	設置掩膜的位置
<bg-size>	定義掩膜的大小
<repeat-style>	指定掩膜的重複方式
<geometry-box>	定義掩膜框
no-clip	防止剪裁掩膜

如果現在這些看起來令人困惑，別擔心。我們將通過範例一一探討！

应用範圍

mask 屬性可以應用於任何元素。就像有一根對所有東西都有效的魔法棒！

語法

mask 屬性的基本語法如下：

.element {
mask: <value>;
}

現在，讓我們詳細看看每個值。

CSS mask - none 值

none 值非常直接。它意味著沒有應用掩膜。就像決定完全不使用你的魔法棒。

.no-mask {
mask: none;
}

這段代碼簡單地告訴瀏覽器，“不要對這個元素應用任何掩膜。”

CSS mask - <mask-reference>

這裡才是真正的魔法開始！<mask-reference> 可以是一張圖像或 CSS 渐變，它定義了元素的哪些部分應該是可見的。

.image-mask {
mask-image: url('mask.png');
mask: url('mask.png');
}

.gradient-mask {
mask-image: linear-gradient(to right, transparent, black);
mask: linear-gradient(to right, transparent, black);
}

在這些範例中，我們使用圖像文件 ('mask.png') 或線性渐變作為我們的掩膜。掩膜中的黑色部分會顯示元素，而透明部分會隱藏它。

CSS mask - <masking-mode>

掩膜模式決定了掩膜是如何應用的。有兩個值：alpha 和 luminance。

.alpha-mask {
mask-mode: alpha;
}

.luminance-mask {
mask-mode: luminance;
}

• alpha：使用掩膜圖像的 alpha 通道。
• luminance：使用掩膜圖像的亮度。

CSS mask - <position>

就像背景圖像一樣，你可以定位你的掩膜：

.positioned-mask {
mask-position: center;
/* 或 */
mask: url('mask.png') center;
}

這會將掩膜置於元素的中心。你可以在此使用任何有效的 CSS 位置值。

CSS mask - <bg-size>

你也可以控制你的掩膜大小：

.sized-mask {
mask-size: cover;
/* 或 */
mask: url('mask.png') cover;
}

這會使掩膜覆蓋整個元素。你也可以使用特定的尺寸，如 100px 200px。

CSS mask - <repeat-style>

如果你的掩膜比元素小，你可以控制它的重複方式：

.repeating-mask {
mask-repeat: repeat-x;
/* 或 */
mask: url('mask.png') repeat-x;
}

這會水平重複掩膜跨過元素。

CSS mask - <geometry-box>

幾何框定義了掩膜覆蓋的區域：

.box-mask {
mask-clip: padding-box;
/* 或 */
mask: url('mask.png') padding-box;
}

這會將掩膜應用於元素的填充框。

CSS mask - <geometry-box> | no-clip

no-clip 值防止掩膜被剪裁到元素的邊界：

.no-clip-mask {
mask-clip: no-clip;
/* 或 */
mask: url('mask.png') no-clip;
}

這允許掩膜超出元素的邊界。

CSS mask - 相關屬性

有幾個與 mask 相關的屬性，讓你擁有更多的控制權：

屬性	描述
mask-image	指定掩膜圖像
mask-mode	設置掩膜模式
mask-repeat	控制掩膜的重複
mask-position	設置掩膜的位置
mask-clip	調整掩膜的繪製區域
mask-origin	設置掩膜的起點
mask-size	指定掩膜的大小
mask-composite	定義掩膜的組合

這些屬性與我們一直在使用的簡寫 mask 屬性的每一部分對應。

而這就是 CSS 掩膜的基礎知識，我的年輕的 CSS 魔術師們！你剛剛學會了 CSS 掩膜的基礎。記住，就像任何魔術一樣，精通 CSS 掩膜需要練習。所以不要害怕嘗試並創造你自己的神奇網頁設計！

在我多年的教學經驗中，我發現最好的學習方式是通過實踐。所以這裡有一個有趣的練習：嘗試使用漸變掩膜創造一個“顯示”效果。當你將鼠標悬停在圖像上時，它會完全顯示出來。這就像拉開一幅簾幕來展示一張藏起的圖片！

快樂編碼，願你的掩膜永遠完美適合！

Credits: Image by storyset