>屏蔽是一種使您可以在隱藏其餘部分時在屏幕上顯示元素的選定部分或圖像的技術。 Web開發人員可以通過Mask屬性和SVG蒙版元素在瀏覽器中使用此技術。這些功能允許您在瀏覽器中顯示對圖像和其他元素的效果，而無需使用任何形式的圖像編輯軟件。
>在本文中，我將向CSS和SVG屏蔽功能展示，還確保包括有關當前瀏覽器支持問題的一些信息。鑰匙要點
CSS和SVG中的
>蒙版是CSS速記屬性，用於整個單個屬性。 讓我們更詳細地仔細研究其中的一些。
>
>蒙版圖像屬性>您可以使用蒙版圖像屬性設置元素的掩碼層圖像。
值無與設置沒有值的值不同。相反，它仍然算作透明的黑色圖像層。
>您可以將掩碼圖像設置為URL值。這可以是通往PNG圖像文件，SVG文件或對SVG
以下是一些示例：
/* 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
.masked-element {
mask-image: url(#mask1);
}
梯度圖像也是掩碼圖像屬性的合適值：
.masked-element {
mask-image: linear-gradient(black 0%, transparent 100%);
}
一個方便的alpha通道示例是一個帶有黑色和透明區域的PNG圖像。蒙版元素將通過蒙版圖像的黑色部分顯示，其alpha值為一個。透明部分下方的其他所有內容都將隱藏為零。
我將使用此png圖像作為我的alpha面具：>並在下面的JPG圖像上執行掩蔽操作：
>
這是魔術發生的地方：>
>這就是瀏覽器中結果的樣子：
.masked-element {
mask-image: url(alpha-mask.png);
mask-mode: alpha;
}
您要掩蓋的元素的區域（由面具的白色像素覆蓋）將介紹。面具的透明像素所覆蓋的蒙版元素的部分將被隱藏。
>將蒙版模式屬性設置為亮度，並將上圖作為我的掩碼，將顯示與以前相同的結果。 >
這是代碼：
>“ mask-repeat屬性”
> mask-repeat的工作非常類似於背景重複屬性。它設置了它們的大小和位置後，它會控制蒙版層圖像的平鋪。
可能的值為：
導致以下掩蔽效果：
>“蒙版位置屬性”
/* 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背景圖像屬性相同的值。它的初始值是中心。
例如，如果要將蒙版映像層放在視口的左上角，請將蒙版位置屬性設置為
> 0 0 0 這是瀏覽器中上面的代碼的樣子：
>將上面的蒙版位置屬性的值更改為> 100％100％，在視口右下方顯示蒙版層圖像：
.masked-element {
mask-image: url(#mask1);
}
>您可以使用Mask-size屬性快速設置蒙版層圖像的大小，該屬性接受與更熟悉的CSS背景大小屬性相同的值。
>
例如，將蒙版大小設置為50％，以其完整寬度的50％顯示掩碼層圖像：>設置蒙版大小以包含，將掩蓋層圖像縮放到最大尺寸，以使其寬度和高度都可以安裝在掩模定位區域內：
>
>請參閱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：
>您可以使用Mask進行控制CSS掩蓋操作的所有屬性。
這是完整的面具速記：
>儘管您可以在蒙版速記中重新排序屬性，但您需要在蒙版屬性之後設置蒙版屬性，並由“/”符號隔開。此外，設置掩碼大小而不設置蒙版位置將導致無效聲明。
>>最後，由於您無法在掩碼屬性上指定的任何值都設置回其初始默認值，因此當您需要重置任何單個屬性時，使用掩碼非常方便。
svg掩碼元素.masked-element {
mask-image: url(#mask1);
}
可擴展的向量圖形或簡稱SVG是一種基於XML的語言，用於標記圖形。
您可以在SVG文檔中使用> SVG可以做的另外一件很酷的事情是使用文本掩蓋頁面上的其他元素。
>讓我們仔細觀察這些可能性。
在編寫時，使用內聯SVG圖形內的
與以下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);
}
>在上面的代碼中，我包含了一個
>最後，我在CSS蒙版屬性中引用了SVG
>僅通過為頁面背景和蒙版圖像添加其他一些樣式聲明，您就可以實現出非常戲劇性的效果，如下面的效果：
請注意，圓面膜的部分如何填充梯度的白色陰影，使蒙版的圖像通過。相反，該部分充滿了梯度的黑色色調，隱藏了掩蓋的圖像。
這是在codepen上進行的實時演示（請記住，它只能在firefox上使用！）。
>請參閱codepen上的sitepoint（@sitepoint）的inline svg掩碼元素的筆蒙版。
在SVG圖形上使用SVG
>在下面的摘要中，我將要將圖像放置在SVG元素中，然後將CSS蒙版屬性應用於它。 CSS蒙版屬性引用了帶有
這是負責CSS中掩蓋操作的片段：
.masked-element {
mask-image: url(#mask1);
}
看Codepen演示：
.masked-element {
mask-image: linear-gradient(black 0%, transparent 100%);
}
掩蓋
>您可以使用SVG蒙版內的文本元素執行掩蔽操作：
上面的摘要在SVG蒙版內添加了一個黑色SVG文本元素，並使用CSS蒙版屬性將其應用於淺藍色的SVG橢圓形。 橢圓形形狀後面的任何內容（在這種情況下，它是身體的背景圖像）將通過文本顯示。結果看起來像這樣：
完整的代碼可在Codepen上使用：
>請參閱codepen上的sitepoint（@sitepoint）的筆svg文本蒙版。
>您可以使用CSS Transition和KeyFrame Animation動畫掩碼位置和掩模大小。
下面是星形PNG掩碼圖像的基本關鍵幀動畫示例。
這是相關的代碼段：
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);
}
元素上的.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掩碼應用於Inline SVG圖形，瀏覽器支持立即Sky-Rockets。僅使用SVG查看相同的動畫演示：
>請參閱sitepoint（@sitepoint）在codepen上的svg元素上的pen動畫svg蒙版。
>瀏覽器對蒙版屬性的支持
>在本文中，我介紹了瀏覽器支持問題。寫作時情況的簡單崩潰，看起來像這樣：
在HTML元素上使用CSS Mask屬性在WebKit瀏覽器上使用-Webkit- vendor前綴。 HTML元素上僅支持Firefox上的HTML元素上的Inline SVG掩碼元素。
Yoksel的這款出色的Codepen演示就瀏覽器的支持而言提供了最先進的視覺插圖。
>我可以使用網站上的瀏覽器支持兼容性表提供了更多詳細信息和鏈接到更多資源。
>儘管當前對CSS蒙版的瀏覽器支持並不是很好，但是如果您將此功能用作一些裝飾元素的增強功能，但不支持瀏覽器的用戶甚至不會注意到它們會錯過。
>>最後，使用SVG
>在CSS和SVG掩蔽上的常見問題（FAQ）
>
>如何使用SVG？為您的網絡元素添加獨特的視覺效果。要創建帶有SVG的梯度蒙版，您需要定義蒙版元素內的線性級別或徑向級別元素。梯度元素應至少具有兩個停止元素，該元素沿梯度沿不同點的顏色和不透明度定義。
是的，您可以使用CSS並共同掩蓋以創建複雜的掩蔽效果。您可以將CSS掩碼應用於元素，然後將SVG掩碼應用於同一元素。該元素的最終可見性是由兩個掩碼的組合確定的。
CSS掩碼在Internet Explorer中不支持。如果您需要支持Internet Explorer，則應改用SVG掩碼。在所有主要瀏覽器中都支持SVG屏蔽，包括Internet Explorer。對於CSS掩蓋，您可以使用CSS動畫或過渡來對掩碼圖像屬性進行動畫動畫。對於SVG屏蔽，您可以使用SVG動畫來對蒙版元素進行動畫。
>如何使用CSS或SVG？
>我可以將視頻用作帶有CSS或svg的掩碼或SVG？
css masking basking支持視頻蒙版。您可以通過將蒙版圖像屬性設置為視頻URL來使用視頻作為掩模圖像。 SVG掩蔽不支持視頻掩碼。
以上是用CSS和SVG在瀏覽器中掩蓋的詳細內容。更多資訊請關注PHP中文網其他相關文章！
