CSS：テキストをマスクとして使用して、背景イメージがテキスト内にのみ表示されるようにすることはできますか？

Question

私は自分のページに素敵な背景を持っています。私はテキストヘッダをその包含divを切り取り、背景をテクスチャとして持つマスクとして機能させたいと思います。 CSSでこれをやってもいいですか、それともPhotoshopを開く必要がありますか？

Answer 1

限定ブラウザのサポートが、background-clipはあなたにこの効果を得ることができます：http://tympanus.net/Tutorials/ExperimentsBackgroundClipText/をあなたはこのようにそれを行うことができますSVGを使って

（もっと楽しく用アニメーションボタンヒット）：実際に行われているかを確認するにはhttp://people.opera.com/dstorey/images/newyorkmaskexample.svg（ソースを表示し、あなたがこれを行うことができ、背景画像と、その後CSSを使用して、あまりにもreference article）

を参照してください。http://www.netmagazine.com/tutorials/texturise-web-type-css

Answer 2

それはすべてのブラウザでは動作しませんが、CSS3でbackground-clip: textプロパティは、あります。詳細はhereを参照してください。

h1 { 
    color: white; /* Fallback: assume this color ON TOP of image */ 
    background: url(images/fire.jpg) no-repeat; 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
} 

をしかし、すべてのブラウザで動作することが保証されていないので、彼らはいくつかの回避策を提案：CSS-トリックは、このarticleで示したよう

Answer 3

は、「テキストの背後にあるイメージは」のような行うことができますたとえば、modernizrです。ここで

は、それが動作するとき、それは次のようになります。