Menu
I'm currently developing a simple page.
Does anyone know of any way to overlay a texture image over text? It seems like it's not possible with the current spec, but please let me know if this is possible.
Thanks and take care!
726
By using the -webkit-mask-image CSS property, you can set the image in a text. This is almost the same like the background-clip except that the mask image clips the visible portion of an element according to image mask transparency.
Dunno why nobody ever answered this. This is possible using background-clip: https://codepen.io/Grsmto/pen/ZomWEj
160
You can't overlay an image over text with native CSS 2.1, That will not be implemented into CSS 3.0 either. The best practice is to use a background image and still use your text in the <h1> tag and hide it with CSS.
<style>
h1 { background:url(images/imagepath.png) no-repeat; height:50px; width:300px; text-indent:-10000px; }
</style>
<body>
<h1>Insert Text Here</h1>
</body>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
