.class {
color: red;
-webkit-text-fill-color: transparent;
background: -webkit-linear-gradient(transparent, transparent),
url(path/to/bg/image) repeat;
background: -o-linear-gradient(transparent, transparent);
-webkit-background-clip: text;
}
~textual feelings~
background-clip:text
is a handy CSS property but is only currently supported by webkit; when it falls through the results are pretty disastrous i.e. you will not see any text, only an image. This is because the text colour must be set to transparent
in order for the newly text-clipped background to be visible through the text.
Luckily, this person figured out how to use background-clip:text
while retaining a usable fallback.