17

ページに素敵な背景があり、テキスト ヘッダーをマスクとして機能させて、含まれている div をカットし、背景をテクスチャとして使用したいと考えています。

CSSでこれを行うことはできますか、それともPhotoshopを開く必要がありますか?

4

4 に答える 4

9

ブラウザーのサポートは限られていbackground-clipますが、この効果を得ることができます: http://tympanus.net/Tutorials/ExperimentsBackgroundClipText/ (もっと楽しくするには、[アニメーション] ボタンを押してください)

SVGを使用すると、次のように実行できます。

背景画像と CSS を使用すると、これを行うことができます: http://www.netmagazine.com/tutorials/texturise-web-type-css

于 2012-08-12T18:48:38.077 に答える
5

CSS-Tricks がこの記事で示しているように、「テキストの背後にある画像」は次のように実行できます。

h1 {
   color: white;  /* Fallback: assume this color ON TOP of image */
   background: url(images/fire.jpg) no-repeat; /* Set the backround image */
   -webkit-background-clip: text; /* clip the background to the text inside the tag*/
   -webkit-text-fill-color: transparent; /* make the text transparent so 
                                          * the background shows through*/
}

ただし、すべてのブラウザーで動作することが保証されているわけではないため、 modernizr などのいくつかの回避策が提案されています。

これが機能するときの外観は次のとおりです。

動作時の外観

于 2015-03-16T16:22:40.843 に答える
4

CSS3 にはプロパティがありますがbackground-clip: text、すべてのブラウザーで機能するとは限りません。詳しくはこちらをご覧ください。

于 2012-08-12T18:49:27.997 に答える