3

我想在鼠标悬停时使用蒙版更改文本的外观。我认为 image-mask 是正确的方法，但我无法让它工作。我的目标是在文本中包含图像。

HTML：

<div id="BEN">BEN</div>

​ CSS：

#ben {
    font-family: 'Arial';
    font-size: 72px;
    color: rgba(0,0,0,1);
    float: right;
    line-height:90px;
    font-weight:bold;

}
#ben:hover {
-webkit-mask-image:url(https://dl.dropbox.com/u/16640285/mask.jpg);
-o-mask-image:url(https://dl.dropbox.com/u/16640285/mask.jpg);
-moz-mask-image:url(https://dl.dropbox.com/u/16640285/mask.jpg);
mask-image:url(https://dl.dropbox.com/u/16640285/mask.jpg);
}​

http://jsfiddle.net/tKE6N/3/

4

2 回答 2

4

根据您的问题标题，更重要的是您对文本字母内的图像的期望，您需要使用 CSS3background-clip来完成此操作，而不是mask-image.

这是一个 webkit教程，可以为您指明正确的方向。

用这个jsFiddle玩它（Chrome 或 Safari）。

对于background-clip 值，Firefox不支持text但支持border-box、padding-box和content-box。由于这个原因，该演示无法在 Firefox v13.0.1 中运行，但预计 v14 将具有此功能。

解决方法是使用此处所示的 SVG 方法。

于 2012-06-17T00:52:45.367 回答
1

它不起作用，因为您声明了您的 div<div id="BEN">BEN</div>并且您的CSS班级是本所以将班级更改为BEN或将您的 div 更改为id="ben"

HMTL这是您必须首先检查广告CSS文件中是否有正确的类的第一件事。CSS课程是case-sensitive如此的本，与本不一样。

更多信息

这是有关CSS Mask-Image & Text的更多信息

于 2012-06-16T23:43:01.737 回答