如何使用 CSS 和 SVG 剪輯和遮罩技術

SVG 非常適合在 Web 上工作，並且剪輯和遮罩允許一些有趣的方式來顯示或隱藏 Web 圖形的片段。 使用這些技術還可以讓您的設計更加靈活，因為您不必手動進行更改和創建新圖像——這一切都通過代碼完成。 通過結合使用 CSS 剪輯和遮罩技術，您將有很多用於網站圖形的選項。

為了幫助澄清事情，遮罩和剪裁是您可以使用 CSS 處理圖像的兩種不同方式。 讓我們從剪輯開始。

剪輯基礎

如果您曾經使用過 Photoshop，那麼您可能已經熟悉剪貼蒙版。 這是一種類似的方法。 裁剪涉及在圖像或元素的頂部放置矢量形狀，如圓形或三角形。 形狀後面的圖像的任何部分都將可見，而形狀邊界之外的所有內容都將被隱藏。

例如，如果三角形剪貼蒙版位於森林圖像的頂部，您將看到三角形內的森林圖像。 形狀的邊界稱為剪輯路徑，不要與折舊的clip屬性混淆。 您可以使用clip-path屬性創建剪輯路徑。

注意：不要在您的實時站點上嘗試此操作

請記住：您不應該直接在您的網站上更改代碼，以確保不會出現任何問題。 我們的免費本地開發應用程序 Local 將幫助您設置一個測試環境，您可以安全地按照本教程進行操作。

剪輯在行動

剪輯始終是矢量路徑。 理解起來可能會令人困惑，但是路徑之外的任何東西都將被隱藏，而路徑內的任何東西都是可見的。 為了更好地理解並自己測試，請參閱 CodePen 上的示例。

以下是示例中的 HTML 結構片段：

<svg class="clip-svg">
	<defs>
		<clipPath id="polygon-clip-triangle-equilateral" clipPathUnits="objectBoundingBox">
			<polygon points="0 0.87, 0.5 0, 0.5 0, 1 0.87" />
		</clipPath>
	</defs>
</svg>

這是使剪輯發生的CSS：

.polygon-clip-triangle-equilateral {
	-webkit-clip-path: polygon(0% 87%, 50% 0%, 50% 0%, 100% 87%);
	clip-path: polygon(0% 87%, 50% 0%, 50% 0%, 100% 87%);
	-webkit-clip-path: url("#polygon-clip-triangle-equilateral");
	clip-path: url("#polygon-clip-triangle-equilateral");
}

您可以看到在 HTML 中引用clipPath id 的位置以及它如何使用clip-path URL 進行剪輯。

剪輯工具

Clippy 是生成 CSS 剪輯路徑的好工具。 有各種各樣的起動器形狀和尺寸可以定制。

掩蔽基礎知識

屏蔽是使用 PNG 圖像、CSS 漸變或 SVG 元素來隱藏圖像的一部分或頁面上的其他元素。 我們將專注於 SVG 圖形，但請記住，這可以通過其他圖像類型或樣式來完成。

掩碼屬性和掩碼元素

只是幫助可視化的複習，重要的是要記住蒙版元素是“原始”（在應用蒙版之前）圖像。 您可能不想看到整個圖像，因此使用 CSS mask屬性隱藏部分圖像。 mask是一組單獨屬性的 CSS 簡寫，稍後我們將深入探討。 SVG <mask>元素用於在 SVG 圖形中添加遮罩效果。 在此示例中，蒙版是一個圓形，並且還應用了一個漸變。

在 SVG 圖形上使用 SVG 掩碼元素

為了感受 SVG <mask> ，我們將使用 SVG 圖形進行遮罩。

乍一看可能有點複雜，但它們共同作用以掩蓋底層圖像。 我們有一個實際的圖像作為背景，那麼 SVG 在哪裡發揮作用呢？ 與剪輯示例不同，此背景圖像在技術上位於 SVG 元素內部。 我們將使用 CSS 將此蒙版應用於圖像。 屬性將來自 SVG 掩碼元素，我們將在我們的 CSS 中為其提供masked-element的 id。

要查看此操作，請查看此 Codepen 示例。 這是蒙版 SVG 圖形的工作代碼：

<svg class="masked-element" width="300" height="300" viewBox="0 0 300 300">
	<image xlink:href="image link" width="300px" height="300px" />
</svg>

使用這個 CSS，我們指定了在哪裡可以找到掩碼。 它將查找#mask-this:

/* Here’s the CSS for masking */
.masked-element image {
  mask: url(#mask1);
}

注意到圓形的漸變了嗎？ 已應用漸變，並為蒙版設置圓形。

<svg class="svg-mask">
 	<defs>
 		<mask id="mask1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
    <linearGradient id="grad" gradientUnits="objectBoundingBox" x2="0" y2="1">
      <stop stop-color="white" offset="0"/>
      <stop stop-color="green" stop-opacity="0" offset="1"/>
    </linearGradient>
    <circle cx="0.50" cy="0.50" r="0.50" id="circle" fill="url(#grad)"/>
  	</mask>
 	</defs>
</svg>

SVG 文本遮罩

文本遮罩可以做一些很酷的事情，例如通過文本塊顯示圖像。 好消息是文本元素可以在 SVG 蒙版中使用。 隨著未來瀏覽器支持的增加，這可能是一種結合圖像和排版的非常有趣的方式。

這是對正在發生的事情的基本解釋。 SVG 掩碼中有一個 SVG 文本元素。 我們已經為白色指定了 RGB 值，它在蒙版文本周圍創建了橢圓形區域。 橢圓形區域後面的任何內容都通過文本顯示，給人一種剪裁的感覺。

<div class="text-wrap">
    <svg class="text-demo" viewBox="0 0 600 400" width="600" height="400">
    <defs>
      <mask id="myMask">
        <rect width="100%" height="100%" fill="#fff" />
        <text x="50" y="200" id="myText">My Text</text>
        <text x="125" y="293" id="mySubtext">SVG</text>
      </mask>
    </defs>
    <ellipse class="masked" cx="300" cy="200" rx="300" ry="150" fill="rgba(255, 255, 255, 0.8)" />
  </svg>
  </div>

/* Here’s the CSS for text element */
#myText {
font-size: 125px;
font-style: bold;
fill: #000;
}

/* Here’s the CSS for masking */
.masked {
mask: url("#myMask");
}

要完全理解，對代碼進行嘗試和試驗會很有幫助。 嘗試在此 Codepen 中更改顏色、更改文本和調整大小。

掩碼圖像屬性

可以聲明圖像，並且可以將mask-image設置為 URL 值。 mask-image可以是 PNG、SVG 或對 SVG mask元素的引用，就像我在前面的示例中演示的那樣。

因為遮罩用於部分或完全隱藏對像或元素的某些部分，所以首先您需要一個指向要被遮罩的元素的文件的圖像鏈接。 這是該圖像的外觀。 它是豐富多彩的，可以非常明顯地顯示面具顯示和隱藏的部分。

<img class="mask-img example-mask" src="https://linktoimage.com/img/image-example.jpg" alt="Masked image">

到目前為止，已經有很多 SVG 代碼，但這個示例略有不同，因為將有一個用 SVG 遮罩的光柵圖像。

.example-mask {
  mask-image: url(https://linktoimage.com/browser-icon-01.svg);
  webkit-mask-image: url(https://linktoimage.com/browser-icon-01.svg);
  mask-mode: alpha;
  webkit-mask-mode: alpha;
  mask-repeat: no-repeat;
  webkit-mask-repeat: no-repeat;
  mask-size: 200px;
  webkit-mask-size: 200px;
  mask-position: center;
  webkit-mask-position: center;
}

mask-image屬性是聲明遮罩形狀的地方。 在這種情況下，掩碼圖像是 SVG 圖形。 包含 URL 鏈接是掩碼的構建方式。

這是在 Codepen 上。

組合多個蒙版圖像

就在您認為蒙版再好不過時，可以選擇設置多個蒙版圖像層。 您需要做的就是添加兩個 URL 值（如果您有野心，可以添加更多），用逗號分隔。

為了從上面擴展簡單的蒙版，將在原始圖形中添加一個箭頭。 這是兩個面具的組合方式。

.combined-mask {
   mask-image: url(https://linktoimage.com/arrow-01.svg), url(https://linktoimage.com/browser-icon-01.svg);
  webkit-mask-image: url(https://linktoimage.com/arrow-01.svg), url(https://linktoimage.com/browser-icon-01.svg);
}

您所要做的就是添加兩個值（用逗號），現在有兩個組合掩碼，使掩碼的可能性無窮無盡。

這是在 Codepen 上。

使用mask-image創建一個簡單的漸變

並非所有面具都必須是複雜的形狀。 有時，遮罩不是特定的圖像，而是像漸變這樣的簡單遮罩。 如果您正在尋找一種快速的方法來實現這一點，那麼mask-image屬性是一個選項，它很容易實現。

在此示例中，有一個類應用於漸變集作為mask-image屬性。 通過這個簡單的聲明，很容易在圖像上創建漸變蒙版。

mask-image: linear-gradient(black, white, transparent);
-webkit-mask-image: linear-gradient(black, white, transparent);

在 Codepen 上看到這個。

掩碼重複屬性

一旦你創建了一個面具，就很容易製作更多。 如果您要製作自定義模式，這真的很方便。 mask-repeat 屬性允許重複掩碼。 如果您以前製作過平鋪背景，則與此類似。

有一些重要的事情要記住，比如大小和需要聲明的掩碼重複類型，以便創建完美的模式。

mask-size很容易可視化，尤其是這裡設置的像素值。

mask-size: 200px;
webkit-mask-size: 200px;

如果您正在為模式尋找不同的效果，還有更多的掩碼重複選項：

• repeat-x沿 x 坐標重複。
• repeat Repeat-y沿 y 坐標重複。
• space在可用區域內重複並散開。
• round在可用區域內重複多次（如果需要，縮放將幫助它填充空間）

瀏覽器支持

在採用這種處理圖形的新方法之前，請務必注意瀏覽器支持與剪切和遮罩不一致。 剪輯比屏蔽更受支持，但 Internet Explorer 並不完全支持剪輯。 當前瀏覽器對 CSS 蒙版的支持也相當有限，因此建議將其用作一些裝飾元素的增強。 這樣，如果用戶的瀏覽器不支持，也不會影響內容查看體驗。

要測試一下是否支持您的蒙版和剪輯，我建議您製作一個 JSFiddle 或 Codepen，然後在不同的瀏覽器中嘗試。 近年來，瀏覽器支持有所增加，最終將達到完全支持的程度。 不要讓限制讓您失望 - 領先於遊戲總是好的，一旦支持成為主流，您將確切知道如何徹底改變您的圖形。 如有疑問，請務必參考受信任的 Can I Use。

在嘗試了這些示例之後，這應該很好地介紹了遮罩和裁剪。 儘管目前瀏覽器支持有限，但這很可能成為未來的主流做法。 思考如何使用這些技術創造有趣的視覺效果總是很有趣。 網絡圖形的未來將使我們減少對圖像編輯器的依賴，並允許更有效的方式直接在瀏覽器中創建和修改圖像。

下一篇：更快地設計網站！

您了解簡化網頁設計過程的重要性。 您可以做的任何事情來更快地設計網站意味著您的口袋裡有更多的錢。 這就是為什麼 Flywheel 設計了我們的託管平台來節省您的時間並讓您盡最大努力！ 使用這些網頁設計技巧和工具，您可以完成更多項目並花更多時間發展您的業務。

在本指南中，我們將介紹如何更快地工作和加快 WordPress 工作流程的技巧。 從最初的站點設置到上線，了解如何從日常工作中減少工作時間！ 今天下載它。

本文最初發佈於 2016 年 8 月 3 日，最後更新於 2018 年 11 月 6 日。