HTML/CSS：「背景を見る」テキスト？

Question

これは可能です。

私は背景イメージを持っています。その上に、私はコンテンツのための透明な灰色のボックスを持っています。テキストの先頭にタイトルを付けると、基本的にはの背景にあるの文字が表示されます。したがって、テキストは灰色のボックスを削除し、背景が透けて見えるようにします。

私が見ることができる唯一のハッキーなやり方は、同じ灰色の背景に文字の透明な画像を作成し、それを何とか灰色のボックスに揃えることです。

他にも良い方法がありますか？

Answer 1

一方向は-webkit-background-clip: text;：demo here（明らかにウェブキットのみ）です。位置を使用して

、我々は両方の背景を同期することができます。

#container, #container h1 { 
    background: url(bg.png) 
} 

#container { 
    position: relative; 
} 

#container #gray { 
    background: rgba(0,0,0,.8); 
    padding-top: 8em; 
} 

#container h1 { 
    font-size: 8em; 
    padding-top: /* padding + border of div */; 
    position: absolute; 
    -webkit-text-fill-color: transparent; 
    -webkit-background-clip: text; 
}​ 

それとも、同じアプローチを使用し、すべての最新ブラウザで動作しますsvg maskを、適用することができます。