透明なテキストで背景が表示される

透明な背景色を持つコンテナ内に透明なテキストを表示することが可能かどうか疑問に思っていました。透明テキストを使用すると、コンテナの背後にあるイメージを見ることができます。 Google検索でこれを見つけたこの透明なテキストで背景が表示される

Transparent text

よう

何か。イメージはPhotoshopで作成されました。 CSSでこの効果を達成できますか？もしそうなら、どうですか？

好奇心が強い。

出典

2016-12-01 Cruz Nunez

私は、これはあなたがちょうどやりたいすべてがtextにtransparentと-webkit-background-clipへ-webkit-text-fill-colorまたはcolorを設定している

<!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>

何を探していることを願っています。単純な

出典

2016-12-01 04:56:50 Nitheesh

もう1つのアプローチは、clip-pathを使用し、SVGイメージをマスクとして使用することです.SVGイメージ自体にテキストを含めることができます。これは、IE（http://caniuse.com/#feat=css-masks）

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

のWebKitとGeckoの中でサポートしているではなく、

出典

2016-12-01 04:58:34 Dai

透明なテキストで背景が表示される

答えて

関連する問題