How Can I Create Transparent Text Over a Background Image Using SVG Masking?

Creating Transparent Text Over a Background Using SVG Masking

In this question, the user seeks to achieve the effect of transparent text cut out of a background using CSS. While CSS methods exist for this purpose, a superior solution involves using inline SVG with SVG masking.

Advantages of SVG Masking:

• Enhanced Browser Support: SVG masking offers wide support in browsers such as IE10 , Chrome, Firefox, and Safari.
• Preserved SEO: SVG content is crawl-able by search engine spiders, including Google, which has indexed SVG since 2010.

Here's how to implement SVG masking in 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%;}

In this code example, the background image is set using CSS, and the SVG text is placed over it with a mask. The text will cut out the background image, creating the desired transparent effect.

Using SVG masking for transparent text provides better browser support and preserves potential SEO benefits.

The above is the detailed content of How Can I Create Transparent Text Over a Background Image Using SVG Masking?. For more information, please follow other related articles on the PHP Chinese website!