用CSS和SVG在瀏覽器中掩蓋-css教學-PHP中文網

首頁

web前端

css教學

用CSS和SVG在瀏覽器中掩蓋

Christopher Nolan

Feb 21, 2025 am 09:09 AM

用CSS和SVG在瀏覽器中掩蓋

>屏蔽是一種使您可以在隱藏其餘部分時在屏幕上顯示元素的選定部分或圖像的技術。 Web開發人員可以通過Mask屬性和SVG蒙版元素在瀏覽器中使用此技術。這些功能允許您在瀏覽器中顯示對圖像和其他元素的效果，而無需使用任何形式的圖像編輯軟件。

>在本文中，我將向CSS和SVG屏蔽功能展示，還確保包括有關當前瀏覽器支持問題的一些信息。 > 在撰寫本文時，大多數代碼示例僅在Webkit瀏覽器中工作，而基於SVG的面具似乎享有更廣泛的瀏覽器支持。因此，如果您想嘗試示例，建議您使用像Chrome這樣的Webkit瀏覽器。

鑰匙要點

CSS和SVG中的

屏蔽允許使用CSS`mask`屬性或svg`

'元素的元素選擇性可見性。

瀏覽器支持各不相同：CSS面具主要支持Webkit瀏覽器，而SVG掩碼在包括Firefox和Internet Explorer在內的現代瀏覽器之間具有更廣泛的兼容性。 > >蒙版屬性，例如`bask-image'，`bask mode'，`bask-repeat`，`bask-position'和`bask-size''和`bask-size'可以單獨設置或合併到速記``為方便起見。
高級掩蔽效果，包括動畫和使用文本作為掩碼，增強了Web Design的靈活性和創造力。

> 使用PNG映像，CSS梯度或SVG元素來隱藏頁面上的某些部分或其他元素。您可以使用CSS蒙版屬性來完成此操作。

> 在本文中，我將專注於使用CSS蒙版屬性和SVG 元素掩蓋。

css mask屬性

>蒙版是CSS速記屬性，用於整個單個屬性。讓我們更詳細地仔細研究其中的一些。

>蒙版圖像屬性

>您可以使用蒙版圖像屬性設置元素的掩碼層圖像。

值無與設置沒有值的值不同。相反，它仍然算作透明的黑色圖像層。

>

>您可以將掩碼圖像設置為URL值。這可以是通往PNG圖像文件，SVG文件或對SVG 元素的引用的路徑。您可以通過添加由逗號分隔的相應數量的URL值來設置多個掩碼圖像層。

以下是一些示例：

/* masking with two comma-separated values */
.masked-element {
  mask-image: url(mask.png), none;
}


/* using external svg graphic as mask */
.masked-element {
  mask-image: url(mask.svg);
}

這是您如何引用svg 元素，其ID > bask1 ：

.masked-element {
  mask-image: url(#mask1);
}

梯度圖像也是掩碼圖像屬性的合適值：>

.masked-element {
  mask-image: linear-gradient(black 0%, transparent 100%);
}

> mask模式屬性

>帶有蒙版模式，您可以將蒙版層圖像設置為alpha蒙版或亮度蒙版。

alpha蒙版是具有alpha通道的圖像。更詳細地說，alpha通道是每個像素數據中包含的透明信息。將蒙版模式屬性設置為alpha的掩蔽操作將使用圖像的alpha值作為掩碼值。

一個方便的alpha通道示例是一個帶有黑色和透明區域的PNG圖像。蒙版元素將通過蒙版圖像的黑色部分顯示，其alpha值為一個。透明部分下方的其他所有內容都將隱藏為零。

我將使用此png圖像作為我的alpha面具：

>並在下面的JPG圖像上執行掩蔽操作：

這是魔術發生的地方：

>這就是瀏覽器中結果的樣子：

.masked-element {
  mask-image: url(alpha-mask.png);
  mask-mode: alpha;
}

亮度蒙版將圖像的亮度值用作掩模值。像上面的png圖像 - 但在白色中 - 是亮度面具的一個很好的例子：

您要掩蓋的元素的區域（由面具的白色像素覆蓋）將介紹。面具的透明像素所覆蓋的蒙版元素的部分將被隱藏。 > 用CSS和SVG在瀏覽器中掩蓋

>將蒙版模式屬性設置為亮度，並將上圖作為我的掩碼，將顯示與以前相同的結果。

這是代碼：

>“ mask-repeat屬性”

> mask-repeat的工作非常類似於背景重複屬性。它設置了它們的大小和位置後，它會控制蒙版層圖像的平鋪。

可能的值為：

> no-repeat：在可用的空間中未重複掩碼層圖像。
重複Y：掩碼層圖像在Y坐標下重複。
例如，這是我打算用作掩模的圖像：

導致以下掩蔽效果：

>“蒙版位置屬性”

/* masking with two comma-separated values */
.masked-element {
  mask-image: url(mask.png), none;
}


/* using external svg graphic as mask */
.masked-element {
  mask-image: url(mask.svg);
}

>您可以使用蒙版位置屬性定位蒙版層圖像。您可以將此屬性設置為與更熟悉的CSS背景圖像屬性相同的值。它的初始值是中心。

例如，如果要將蒙版映像層放在視口的左上角，請將蒙版位置屬性設置為用CSS和SVG在瀏覽器中掩蓋

> 0 0 0

的值

這是瀏覽器中上面的代碼的樣子：>

>將上面的蒙版位置屬性的值更改為> 100％100％，在視口右下方顯示蒙版層圖像：>

.masked-element {
  mask-image: url(#mask1);
}

>“蒙版”屬性

>您可以使用Mask-size屬性快速設置蒙版層圖像的大小，該屬性接受與更熟悉的CSS背景大小屬性相同的值。用CSS和SVG在瀏覽器中掩蓋

> 例如，將蒙版大小設置為50％，以其完整寬度的50％顯示掩碼層圖像：

>設置蒙版大小以包含，將掩蓋層圖像縮放到最大尺寸，以使其寬度和高度都可以安裝在掩模定位區域內：

您可以在下面的Codepen上看到這些演示：

>請參閱codepen上的sitepoint（@sitepoint）的筆CSS蒙版示例。

組合蒙版層

如上所述，您可以通過將蒙版圖像屬性的每個值與逗號分開，可以在同一元素上使用多個掩碼層。這些圖層被堆疊在另一層上，最後一層首先顯示在屏幕上。

例如：

：

/* masking with two comma-separated values */
.masked-element {
  mask-image: url(mask.png), none;
}


/* using external svg graphic as mask */
.masked-element {
  mask-image: url(mask.svg);
}

在上面的摘要中，

bask2.png在> mask1.png 的頂部分層。

>“蒙版複合屬性”使您可以根據以下關鍵字的值組合不同的掩碼層：>

add：

繪製在> mask1.png 的頂部 減去：顯示不重疊
的> bask2.png 的部分。因此，瀏覽器至少在暫時不支持標準關鍵字，因此您需要使用相應的合成操作員關鍵字源 Intersect：顯示的部分重疊
。但是，Webkit瀏覽器是唯一支持CSS掩碼的瀏覽器的瀏覽器，即使使用了非標準的複合源關鍵字，也似乎在屏幕上沒有顯示任何內容。 排除：顯示不重疊的 bask1.png和 bask2.png 的部分。再一次，由於標準關鍵字尚無支持，因此您使用合成操作員XOR更好了。
>您也可以在下面的Codepen演示中查看實時演示：> >請參閱codepen上的sitepoint（@sitepoint）的筆CSS蒙版組合。

> shorthand屬性

>您可以使用Mask進行控制CSS掩蓋操作的所有屬性。

這是完整的面具速記：

> mask-origin和mask-clip工作，例如更熟悉的背景 - 原始屬性和背景折疊屬性。

>儘管您可以在蒙版速記中重新排序屬性，但您需要在蒙版屬性之後設置蒙版屬性，並由“/”符號隔開。此外，設置掩碼大小而不設置蒙版位置將導致無效聲明。

>最後，由於您無法在掩碼屬性上指定的任何值都設置回其初始默認值，因此當您需要重置任何單個屬性時，使用掩碼非常方便。

svg掩碼元素

.masked-element {
  mask-image: url(#mask1);
}

可擴展的向量圖形或簡稱SVG是一種基於XML的語言，用於標記圖形。

您可以在SVG文檔中使用元素來為HTML元素和其他SVG圖形添加掩碼效果。

> SVG可以做的另外一件很酷的事情是使用文本掩蓋頁面上的其他元素。

>讓我們仔細觀察這些可能性。

>

在HTML元素上使用SVG 元素

在編寫時，使用內聯SVG圖形內的元素掩蓋HTML元素僅在Firefox瀏覽器中起作用。這是一個示例：

與以下CSS：

/* masking with two comma-separated values */
.masked-element {
  mask-image: url(mask.png), none;
}


/* using external svg graphic as mask */
.masked-element {
  mask-image: url(mask.svg);
}

>在上面的代碼中，我包含了一個元素，其ID為>>>>> 。在面具內部，我放置了一個黑色和白色梯度，ID為 grad和一個圓形形狀，該梯度將梯度用作其填充顏色。

>最後，我在CSS蒙版屬性中引用了SVG 元素的ID值。這將蒙版效果應用於頁面上的圖像。

>僅通過為頁面背景和蒙版圖像添加其他一些樣式聲明，您就可以實現出非常戲劇性的效果，如下面的效果：

請注意，圓面膜的部分如何填充梯度的白色陰影，使蒙版的圖像通過。相反，該部分充滿了梯度的黑色色調，隱藏了掩蓋的圖像。

這是在codepen上進行的實時演示（請記住，它只能在firefox上使用！）。

>請參閱codepen上的sitepoint（@sitepoint）的inline svg掩碼元素的筆蒙版。

在SVG圖形上使用SVG 元素

>您可以在上一個示例中使用相同的SVG 元素，但是這次掩蓋了SVG圖形而不是HTML元素。優點是瀏覽器支持更好，包括WebKit瀏覽器和最新的IE。

>在下面的摘要中，我將要將圖像放置在SVG元素中，然後將CSS蒙版屬性應用於它。 CSS蒙版屬性引用了帶有 bask1 元素，就像上一個示例一樣。這是蒙版SVG圖形的代碼：

這是負責CSS中掩蓋操作的片段：

結果與上一個示例幾乎相似，只有這次您才能在所有主要瀏覽器上查看它。

.masked-element {
  mask-image: url(#mask1);
}

看Codepen演示：

.masked-element {
  mask-image: linear-gradient(black 0%, transparent 100%);
}

>請參閱sitepoint（@sitepoint）上的SVG元素上的Pen SVG蒙版。用SVG文本

掩蓋

>您可以使用SVG蒙版內的文本元素執行掩蔽操作：

上面的摘要在SVG蒙版內添加了一個黑色SVG文本元素，並使用CSS蒙版屬性將其應用於淺藍色的SVG橢圓形。橢圓形形狀後面的任何內容（在這種情況下，它是身體的背景圖像）將通過文本顯示。結果看起來像這樣：

完整的代碼可在Codepen上使用：

>請參閱codepen上的sitepoint（@sitepoint）的筆svg文本蒙版。

>動畫蒙版

>您可以使用CSS Transition和KeyFrame Animation動畫掩碼位置和掩模大小。

下面是星形PNG掩碼圖像的基本關鍵幀動畫示例。

這是相關的代碼段：>

蒙版元素是html

tag：

>遮罩操作使用速記蒙版屬性：

/* masking with two comma-separated values */
.masked-element {
  mask-image: url(mask.png), none;
}


/* using external svg graphic as mask */
.masked-element {
  mask-image: url(mask.svg);
}

用CSS和SVG在瀏覽器中掩蓋元素上的.Animate類，使用CSS變換和動畫為星形圖像添加了運動：

.masked-element {
  mask-image: url(#mask1);
}

>啟動像Chrome這樣的WebKit瀏覽器，並在Codepen上查看以下實時演示：

.masked-element {
  mask-image: linear-gradient(black 0%, transparent 100%);
}

請參閱Codepen上的Maria Antonietta Perna（@antonietta）的CSS面具動畫的筆

>用CSS

對SVG掩碼元素進行動畫動畫

>您可以使用SVG 元素在用CSS和SVG在瀏覽器中掩蓋標籤上添加掩碼效果，然後使用CSS進行動畫。

這是一個快速的編碼器演示：在任何瀏覽器上都可以看到動畫，但是屏蔽僅在Firefox中呈現：>

>請參閱sitepoint（@sitepoint）上的html元素上的pen動畫svg蒙版。

好消息是，如果您將SVG掩碼應用於Inline SVG圖形，瀏覽器支持立即Sky-Rockets。僅使用SVG查看相同的動畫演示：

>請參閱sitepoint（@sitepoint）在codepen上的svg元素上的pen動畫svg蒙版。

>瀏覽器對蒙版屬性的支持

>在本文中，我介紹了瀏覽器支持問題。寫作時情況的簡單崩潰，看起來像這樣：

在HTML元素上使用CSS Mask屬性在WebKit瀏覽器上使用-Webkit- vendor前綴。 HTML元素上僅支持Firefox上的HTML元素上的Inline SVG掩碼元素。

SVG元素上的Inline SVG屏蔽元素在Webkit瀏覽器以及Firefox和最新的Internet Explorer中支持。 >

Yoksel的這款出色的Codepen演示就瀏覽器的支持而言提供了最先進的視覺插圖。

alan greenblatt提供了一個GitHub存儲庫，他可以在其中支持與CSS圖形相關的屬性的詳細信息。

>我可以使用網站上的瀏覽器支持兼容性表提供了更多詳細信息和鏈接到更多資源。

>儘管當前對CSS蒙版的瀏覽器支持並不是很好，但是如果您將此功能用作一些裝飾元素的增強功能，但不支持瀏覽器的用戶甚至不會注意到它們會錯過。

>最後，使用SVG 元素在SVG圖形上應用掩蔽效果，在現代瀏覽器上享有最廣泛的支持，並且在網上看起來很棒。

資源

在CSS-tricks上的CSS中剪切和掩蓋
codrops css css用掩模圖像
> svg 在mdn
SVG面具
css掩蓋。

>在CSS和SVG掩蔽上的常見問題（FAQ）

> CSS和SVG掩碼之間有什麼區別？

CSS和SVG掩蔽均使您可以隱藏或揭示元素的部分。但是，他們的方法和能力有所不同。 CSS蒙版使用圖像作為掩模層，其中掩碼圖像的alpha通道決定了元素的可見性。另一方面，SVG屏蔽使用矢量圖形作為掩模層，該圖形提供了更大的靈活性和控制掩碼的形狀和大小。 SVG掩蔽還支持顏色和梯度掩模，CSS掩蓋不可能。

>如何使用SVG？

為您的網絡元素添加獨特的視覺效果。要創建帶有SVG的梯度蒙版，您需要定義蒙版元素內的線性級別或徑向級別元素。梯度元素應至少具有兩個停止元素，該元素沿梯度沿不同點的顏色和不透明度定義。

我可以使用CSS和SVG屏蔽嗎？

是的，您可以使用CSS並共同掩蓋以創建複雜的掩蔽效果。您可以將CSS掩碼應用於元素，然後將SVG掩碼應用於同一元素。該元素的最終可見性是由兩個掩碼的組合確定的。

為什麼我的CSS掩碼不在Internet Explorer中工作？

CSS掩碼在Internet Explorer中不支持。如果您需要支持Internet Explorer，則應改用SVG掩碼。在所有主要瀏覽器中都支持SVG屏蔽，包括Internet Explorer。對於CSS掩蓋，您可以使用CSS動畫或過渡來對掩碼圖像屬性進行動畫動畫。對於SVG屏蔽，您可以使用SVG動畫來對蒙版元素進行動畫。