I wish to mask some anchor text of size 4.5em with a repeating image, so that the image would only show over the region where text is present. Is there any way that I can do this with CSS? Please help with relevant code and example, if possible. Thanks. :)
2
-
2Ask for ideas not the code. Also show us what you have done so far.Mahesh– Mahesh2011-09-06 07:23:59 +00:00Commented Sep 6, 2011 at 7:23
-
@mahesh: I didn't mean the exact code. I meant something like an example brother.ikartik90– ikartik902011-09-06 09:26:52 +00:00Commented Sep 6, 2011 at 9:26
Add a comment
|
2 Answers
I think you're not out of luck! The only fathomable way to do this in CSS is using the image-mask property. It's really easy, but it has pretty poor browser support at the moment. think it works well in firefox, opera and google chrome. No IE support at the moment. Here's how it's used:
p{
-webkit-mask-image: url(/path/to/mask.png);
-o-mask-image: url(/path/to/mask.png);
-moz-mask-image: url(/path/to/mask.png);
mask-image: url(/path/to/mask.png);
}
That will mask every paragraph with the image path. Fortunately, it degrades nicely in IE, so users won't even notice anything wrong it'll show up as normal text! so if you don't REALLY need IE support, do this. If you do need IE support:
Use an image. Make it in photoshop. :(
Here's a demo of how its used:
3 Comments
ikartik90
I tried using it, but it's not seemingly working. The image needs to show above the text only where the text is present. And that's not happening. :(
alt
Yes, that's what mask-image does. What exactly is happening? It works, trust me, something is wrong. Check the site I linked to, use your browser's element inspector to find out what you're doing that he is not or vice versa.
ikartik90
I just realized that the problem lied in some compatibility issue with Firefox (Even though I've got the latest version). The mask works well on Chrome. Thanks :)
They are not liking the mask-image property outside WebKit but at the moment you can simulate it via "filter" in IE and via SVG in Firefox(/Opera?/WebKit?/IE?)
