有沒有辦法用 CSS 制作出如下圖所示的從背景中切出透明文本效果？
由于圖像取代了文本而失去了所有寶貴的 SEO，這將是令人遺憾的。
我首先想到了陰影，但我想不出任何東西......
該圖片為網(wǎng)站背景，絕對(duì)定位的<img>標(biāo)簽
2
0
0
雖然這可以通過 CSS 實(shí)現(xiàn)，但更好的方法是使用 內(nèi)聯(lián) SVG 與 SVG 遮罩。與 CSS 相比，這種方法有一些優(yōu)點(diǎn)：
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%;}
如果您的目標(biāo)是使文本可選擇和可搜索，則需要將其包含在 <defs> 標(biāo)記之外。以下示例顯示了一種使用 < 保留透明文本的方法使用>標(biāo)簽：
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%;}
CSS3 可以實(shí)現(xiàn)，但并非所有瀏覽器都支持
帶有背景剪輯：文本；您可以使用文本背景，但必須將其與頁面背景對(duì)齊
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
