Hintergrund und transparenter Text werden abgeschnitten

Question

Gibt es eine Möglichkeit, mithilfe von CSS den Effekt „Transparenten Text aus dem Hintergrund ausschneiden“ zu erstellen, wie unten gezeigt? Es wäre eine Schande, all das wertvolle SEO zu verlieren, weil Bilder den Text ersetzen.

Ich dachte zuerst an Schatten, aber mir fiel nichts ein...

Dieses Bild ist der Website-Hintergrund, absolut positioniertes

Tag

Answer 1

虽然这可以通过 CSS 实现，但更好的方法是使用 内联 SVG 与 SVG 遮罩。与 CSS 相比，这种方法有一些优点：

• 更好的浏览器支持：IE10+、chrome、Firefox、safari...
• 这不会影响 SEO，因为蜘蛛可以抓取 SVG 内容 (Google 自 2010 年起对 SVG 内容编制索引)

CodePen 演示：SVG 文本掩码

body,html{height:100%;margin:0;padding:0;}
body{
  background:url('https://farm9.staticflickr.com/8760/17195790401_94fcf60556_c.jpg');
  background-size:cover;
  background-attachment:fixed;
}
svg{width:100%;}

如果您的目标是使文本可选择和可搜索，则需要将其包含在 <defs> 标记之外。以下示例显示了一种使用 < 保留透明文本的方法使用>标签：

body,html{height:100%;margin:0;padding:0;}
body{
  background:url('https://farm9.staticflickr.com/8760/17195790401_94fcf60556_c.jpg');
  background-size:cover;
  background-attachment:fixed;
}
svg{width:100%;}

Answer 2

CSS3 可以实现，但并非所有浏览器都支持

带有背景剪辑：文本；您可以使用文本背景，但必须将其与页面背景对齐

body {
    background: url(http://www.color-hex.com/palettes/26323.png) repeat;
    margin:10px;
}
h1 { 
    background-color:#fff;
    overflow:hidden;
    display:inline-block; 
    padding:10px; 
    font-weight:bold;
    font-family:arial;
    color:transparent;
    font-size:200px;
}
span { 
    background: url(http://www.color-hex.com/palettes/26323.png) -20px -20px repeat;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    display:block;
}

ABCDEFGHIKJ