3

マウスホバー時にマスクを使用してテキストの外観を変更したい。これを行うにはイメージマスクが正しい方法だと思いましたが、うまくいきません。私の目標は、テキスト内に画像を含めることです。

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

質問のタイトル、さらに重要なことに、テキスト文字内の画像を期待するというコメントごとに、background-clipこれを実現するには、CSS3を使用する必要がありますmask-image。

これが正しい方向を示すためのWebkitチュートリアルです。

このjsFiddleでそれ（ChromeまたはSafari）で遊んでください。

background-clip 値については、Firefoxは、、、およびをサポートしていませんtextが、サポートしていborder-boxます。このため、デモはFirefox v13.0.1では機能しませんが、v14にはこの機能が期待されています。padding-boxcontent-box

回避策は、ここに示すようにSVGメソッドを使用することです。

于 2012-06-17T00:52:45.367 に答える
1

<div id="BEN">BEN</div>でdivを宣言し、CSSクラスがベンであるため、クラスをBEN変更するか、divをに変更するため、機能しませんid="ben"

HMTLこれは、 adCSSファイルに正しいクラスがあるかどうかを最初に確認する必要がある最初のことです。CSSクラスはcase-sensitiveとてもベンなので、ベンと同じではありません。

詳細情報

CSS Mask-Image & Text の詳細はこちら

于 2012-06-16T23:43:01.737 に答える