Question

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

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/

Answer 1

根据您的问题标题，更重要的是您对期望文字字母内部图片的评论，您需要使用CSS3 background-clip来完成此操作，而不是mask-image。

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

使用此jsFiddle播放（Chrome或Safari）。

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

解决方法是使用如图HERE所示的SVG方法。

Answer 2

它不起作用，因为您使用<div id="BEN">BEN</div>声明了您的div并且您的CSS类是ben，因此将类更改为BEN或将您的div更改为id="ben"

首先，您必须先检查HMTL ad CSS文件中是否有正确的课程。 CSS类是case-sensitive，所以BEN与ben不一样。

更多information

以下是有关CSS Mask-Image & Text

的更多信息

如何使用CSS3在Text中放置图像？

2 个答案: