This works on tiddlywiki.com
<style>
.jack {
font-size: 72px;
background: url(<$macrocall $name="datauri" title="Motovun Jack.jpg"
$output="text/plain"/>);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
<div class="jack">
!GOLD
</div>
<:-)
On Monday, November 8, 2021 at 8:52:06 PM UTC+1 [email protected] wrote:
> I'm trying to make a class that will allow me to fill text with an image.
> For example, making a drop cap for a manuscript-inspired theme that looks
> like it's been gilded, by using an image of gold leaf.
>
> The interwebz tell me that I want to use background-clip, but I'm not sure
> how to set that up in a CSS class. Does anyone have any pointers?
>
> All I have so far, which doesn't work (and I didn't think it would):
>
> .dropcap { font-size: 40px;
> margin: 10pc;
> border: 5px double black;
> float: left; background-image: url(<$macrocall $name="datauri"
> title="paua.jpg" $output="text/plain"/>) background-clip: text; }
>
> Thanks,
> Aidan
>
--
You received this message because you are subscribed to the Google Groups
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/a176c54b-b9b3-4bfe-ac7f-b0891028dc6cn%40googlegroups.com.