透明文本允許背景顯示

我想知道是否有可能實現具有純色背景的容器內的透明文本。透明文本允許您看到容器後面的圖像。透明文本允許背景顯示

像這樣的事情

Transparent text

與谷歌搜索發現這一點。該圖像是在Photoshop中創建的。這個效果可以通過CSS實現嗎？如果是這樣，怎麼樣？

只是好奇。

2016-12-01 Cruz Nunez

我希望這將是你在找什麼

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <style> 
 
     body { 
 
      background: url(https://lh3.googleusercontent.com/-iFUzJopkFgY/VfZYTJZtC4I/AAAAAAAAArw/mmFz7fGW0VQ/w1920-h1080/never_alone___-wallpaper-1920x1080.jpg) repeat; 
 
      margin: 10px; 
 
     } 
 
     
 
     h1 { 
 
      background-color: #fff; 
 
      overflow: hidden; 
 
      display: inline-block; 
 
      padding: 10px; 
 
      font-weight: bold; 
 
      font-family: arial; 
 
      font-size: 200px; 
 
     } 
 
     
 
     span { 
 
      background: url(https://lh3.googleusercontent.com/-iFUzJopkFgY/VfZYTJZtC4I/AAAAAAAAArw/mmFz7fGW0VQ/w1920-h1080/never_alone___-wallpaper-1920x1080.jpg) -20px -20px repeat; 
 
      -webkit-text-fill-color: transparent; 
 
      -webkit-background-clip: text; 
 
      display: block; 
 
     } 
 
     .Container { 
 
      text-align: center; 
 
     } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div class="Container"> 
 
     <h1><span>LOS ANGELES</span></h1> 
 
    </div> 
 
</body> 
 

 
</html>

所有你只是想要做的是設置-webkit-text-fill-color或color到transparent和-webkit-background-clip到text。簡單:)

來源

2016-12-01 04:56:50 Nitheesh

另一種方法是使用clip-path並使用SVG圖像作爲蒙版 - SVG圖像本身可以包含文本。這有支持WebKit和壁虎，但不是IE（http://caniuse.com/#feat=css-masks）

https://css-tricks.com/clipping-masking-css/

來源

2016-12-01 04:58:34 Dai

透明文本允許背景顯示

回答

相關問題