背景与透明文本被剪掉

Question

有没有办法用 CSS 制作出如下图所示的从背景中切出透明文本效果？

由于图像取代了文本而失去了所有宝贵的 SEO，这将是令人遗憾的。

我首先想到了阴影，但我想不出任何东西......

该图片为网站背景，绝对定位的<img>标签

Answer 1

虽然这可以通过 CSS 实现，但更好的方法是使用 内联 SVG< /a> 与 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