Question

我希望使用重复图像屏蔽一些尺寸为4.5em的锚文本，以便图像仅显示文本所在的区域。有什么办法可以用CSS做到这一点吗？如果可能，请帮助相关代码和示例。谢谢。：）

Answer 1

不确定为什么你得到了投票，对我来说似乎是一个合法的问题。虽然可能有点描述性。

无论如何，我觉得你没有运气！在CSS中唯一能做到这一点的方法是使用image-mask属性。这很简单，但目前浏览器支持很差。认为它在firefox，opera和google chrome中运行良好。目前没有IE支持。以下是它的使用方法：

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);
}

这将使用图像路径屏蔽每个段落。幸运的是，它在IE中很好地降级，因此用户甚至不会注意到任何错误，它将显示为普通文本！因此，如果您不真的需要IE支持，请执行此操作。如果您确实需要IE支持：

使用图像。在photoshop中制作它。：（

以下是其使用方式的演示：

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

Answer 2

他们不喜欢WebKit外的mask-image属性，但目前您可以通过"filter" in IE和SVG in Firefox（/Opera?/WebKit?/IE?）来模拟它

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

2 个答案: