物理テキストに背景イメージ/テクスチャを使用しますか？

Question

私はそれがSVGで行われているのを見ました。テキストの塗りつぶしは色ではなく画像です。 CSS3を使ってこのようなことが可能かどうか疑問に思っています。

私はウェブを見て、これまでテキストの上に画像を重畳している回避策しか見つけていませんでした（thisを参照してください）。実際にテキストの背景イメージを持つことは別として、背景グラデーションを持つことは可能ですか？

Answer 1

CSS3は、background-clipプロパティを追加します。これは実際に-webkit-background-clip: textを使用して行うことができますが、textの値はプロプライエタリであり、現在はWebkitベースのブラウザ（SafariとChrome）でのみ実装されています。 -webkit-background-clip: text;を使用

h1 { 
    font-size: 3em; 
    background: url('someimage.png'); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
} 

いくつかの記事：本当に

• Gradient Text
• Animated background clip text
• Fun with -webkit-background-clip and @font-face

Answer 2

私があなたの言っていることを理解していれば、いいえ。 CSS3の驚異的な不思議さでも、テキストを単色にしか設定できません。