Verwenden Sie ein Hintergrundbild/Textur auf dem physischen Text?

Question

Ich habe es in SVGs gesehen: die Textfüllung ist ein Bild und nicht eine Farbe; und ich habe mich gefragt, ob so etwas mit CSS3 möglich wäre.

Ich habe mich im Internet umgesehen und habe bisher nur Workarounds gefunden, die ein Bild im Grunde über Text überlagern (siehe this, was für mich keine praktikable Option ist). Gibt es neben einem Hintergrundbild für Text einen Hintergrundgradienten?

Answer 1

CSS3 fügt die Eigenschaft background-clip hinzu. Sie können dies tatsächlich mit -webkit-background-clip: text tun, aber der text Wert ist proprietär und derzeit nur in Webkit basierten Browsern (Safari und Chrome) implementiert.

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

Einige Artikel, die -webkit-background-clip: text; verwenden:

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

Answer 2

Wenn ich verstehe, was Sie sagen, nein. Sie können nur Text mit einer Farbe festlegen, selbst mit den magischen Wundern von CSS3.