Latar belakang dan teks lutsinar dipotong
P粉439804514
P粉439804514 2024-03-25 16:47:36
0
2
558

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

P粉439804514
P粉439804514

membalas semua(2)
P粉200138510

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

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

  
    
      
      SVG
      Text mask
    
  
      

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

  
    
      SVG
      Text mask
    
    
      
      
    
  
  
  
P粉351138462

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

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan