Latar belakang dan teks lutsinar dipotong

Question

Adakah terdapat cara untuk menggunakan CSS untuk mencipta kesan potong teks lutsinar dari latar belakang seperti yang ditunjukkan di bawah?

Adalah memalukan untuk kehilangan semua SEO yang berharga itu kerana imej menggantikan teks.

Saya fikir bayang-bayang dulu tapi tak terfikir apa-apa...

Gambar ini adalah latar belakang laman web, diletakkan secara mutlak <img> tag

Answer 1

Walaupun ini boleh dicapai dengan CSS, pendekatan yang lebih baik ialah menggunakan Sebaris SVG dengan Topeng SVG. Pendekatan ini mempunyai beberapa kelebihan berbanding CSS:

• Sokongan penyemak imbas yang lebih baik: IE10+, chrome, Firefox, safari...
• Ini tidak menjejaskan SEO kerana labah-labah boleh merangkak kandungan SVG (Google telah mengindeks kandungan SVG sejak 2010)

Demo Pen Kod: Menyamar Teks 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%;}

Jika matlamat anda adalah untuk menjadikan teks boleh dipilih dan dicari, anda perlu memasukkannya ke dalam tag <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 boleh dilaksanakan, tetapi tidak semua pelayar menyokongnya

Dengan klip latar belakang: teks; anda boleh menggunakan latar belakang teks tetapi ia mesti diselaraskan dengan latar belakang halaman

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