有沒有辦法用 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 示範(fàn)：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)記之外。以下範(fàn)例顯示了一種使用 < 保留透明文字的方法使用>#標(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
