使用CSS在图像上应用图像蒙版

Question

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. :)

Answer 1

Not sure why you got the down vote, seems like a legit question to me. Could've been a bit more descriptive though.

Anyway, 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:

http://trentwalton.com/2011/05/19/mask-image-text/

Answer 2

他们不喜欢WebKit外面的mask-image属性，但目前你可以通过IE中的“过滤器”和Firefox中的SVG （ / Opera？/ WebKit？/ IE？ ）来模拟它。