如何使用 SVG 遮罩在背景圖像上建立透明文字？

使用SVG Masking 在背景上創建透明文本

在這個問題中，用戶尋求實現從透明文本中剪出的效果使用CSS 的背景。雖然為此目的存在 CSS 方法，但更好的解決方案是使用內聯 SVG 和 SVG 遮罩。

SVG 遮罩的優點：

• 增強的瀏覽器支援： SVG masking 在 IE10、Chrome、Firefox 等瀏覽器中提供廣泛支援Safari。
• 保留的 SEO：SVG 內容可以被搜尋引擎蜘蛛抓取，包括 Google，它自 2010 年以來就已經對 SVG 建立了索引。

以下是如何實作SVG 遮罩code:

HTML:

<svg viewbox="0 0 100 60">
  <defs>
    <mask></mask></defs></svg>

CSS:

body,html{height:100%;margin:0;padding:0;}
body{
  background:url('background.jpg');
  background-size:cover;
  background-attachment:fixed;
}
svg{width:100%;}

CSS:

在此程式碼範例中，使用CSS 設定背景影像，並將SVG 文字放置在帶著面具。文字將剪切背景圖像，創建所需的透明效果。 對透明文字使用 SVG 遮罩可提供更好的瀏覽器支援並保留潛在的 SEO 優勢。

以上是如何使用 SVG 遮罩在背景圖像上建立透明文字？的詳細內容。更多資訊請關注PHP中文網其他相關文章！