html - 如何使用 CSS3 在文本中放置图像？

Question

我想在鼠标悬停时使用蒙版更改文本的外观。我认为 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/

Answer 1

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

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

用这个 jsFiddle 玩它(Chrome 或 Safari) .

---

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

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