html - HTML/CSS: 「背景が透けて見える」テキスト?

Question

わかりました、これは可能ですか。

背景画像があります。その上に、コンテンツ用の透明な灰色のボックスがあります。テキストの上部にタイトルを付けたいのですが、それは基本的に背景を露出させる文字です。したがって、テキストは灰色のボックスを削除し、背景が透けて見えるようにします。

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

別の - より良い - 方法はありますか?

Answer 1

1 つの方法は、ここで-webkit-background-clip: text;: demoを使用することです(明らかに webkit のみ)。

位置を使用して、両方の背景を同期できます。

#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を適用することもできます。これは、最新のすべてのブラウザーで機能します。