如何建立透明文字剪下：CSS 與 SVG 遮罩？

使用CSS 或SVG 遮罩從背景中剪切出透明文字

建立透明文字效果，其中文字似乎已被剪切出背景是常見的設計要求。雖然使用 CSS 可以實現這種效果，但更強大和更有利的方法是利用 SVG 遮罩。

基於 CSS 的方法：

使用 CSS，您可以可以套用具有擴散半徑值的文字陰影來建立透明文字效果。但是，此方法的瀏覽器支援有限，可能會對 SEO 產生負面影響。

SVG 遮罩方法：

要實現具有最佳性能和SEO 優勢的透明文字剪切，請考慮使用具有SVG 遮罩的內聯SVG 。此技術具有多種優點：

• 增強的瀏覽器支援： 受 IE10、Chrome、Firefox 和 Safari 支援。
• 保留 SEO： 蜘蛛可以抓取 SVG 內容，確保您的文字仍然可透過搜尋索引引擎。

實作：

要實作 SVG 遮罩，請建立一個有遮罩元素的 SVG 來定義透明區域。然後將文字定位在遮罩區域內。

程式碼範例：

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

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

透過利用SVG 遮罩，您可以實現透明的文字剪切效果針對使用者體驗和SEO 進行了最佳化。

以上是如何建立透明文字剪下：CSS 與 SVG 遮罩？的詳細內容。更多資訊請關注PHP中文網其他相關文章！