Hello
Text Background Clip
RJM Programming - May, 2022
Thanks to
Emoji + background-clip:text
Words
CSS
Hello
<style> div:before { content: attr(data-hover); } div { display: inline-block; font-size: 128px; line-height: 1.2; text-align: center; background: url(https://picsum.photos/1000/1000?image=580) center center no-repeat; background-size: cover; background-clip: text; -webkit-background-clip: text; color: rgba(255,0,0,0.6); span { color: transparent; } } html { height: 100%; display: flex; } /* body { margin: auto; max-width: 300px; text-align: center; } */ </style>