亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

<rt id="lkuj4"></rt>

Gemeinschaft

Lernen

Tools-Bibliothek

KI-Tools

Freizeit

Deutsch

Hintergrund und transparenter Text werden abgeschnitten

P粉439804514 2024-03-25 16:47:36

895

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

P粉439804514

Antworte allen(2)

P粉2001385102024-03-26 10:05:53 2 Etage

雖然這可以通過(guò) CSS 實(shí)現(xiàn)，但更好的方法是使用內(nèi)聯(lián) SVG 與 SVG 遮罩。與 CSS 相比，這種方法有一些優(yōu)點(diǎn)：

更好的瀏覽器支持：IE10+、chrome、Firefox、safari...
這不會(huì)影響 SEO，因?yàn)橹┲肟梢宰ト?SVG 內(nèi)容 (Google 自 2010 年起對(duì) SVG 內(nèi)容編制索引)

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%;}

Wie +0

Antwort hinzufügen

P粉3511384622024-03-26 00:19:58 1 Etage

CSS3 可以實(shí)現(xiàn)，但并非所有瀏覽器都支持

帶有背景剪輯：文本；您可以使用文本背景，但必須將其與頁(yè)面背景對(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;
}