背景與透明文字被剪掉

Question

有沒有辦法用 CSS 製作出如下圖所示的從背景中切出透明文字效果？

由於圖像取代了文字而失去了所有寶貴的 SEO，這將是令人遺憾的。

我首先想到了陰影，但我想不出任何東西...

圖片為網站背景，絕對定位的<img>標籤

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