4

添付の写真のような効果を簡単なCSSで作成できるのではないかと思っていました。次善の選択肢は何でしょうか？前もって感謝します！

http://i.stack.imgur.com/dWrgP.png

4

3 に答える 3

3

これがあなたが探しているものかもしれないと思います。もちろん、ブラウザ間で十分にサポートされているわけではありませんが、それを要件としてリストしていません。

于 2011-11-04T13:47:49.597 に答える
1

現在、CSSだけを使用してこれを実現することはできません。ただし、CSS拡張機能を使用してWebkitベースのブラウザー（Safari、Chromeなど）でこれを実行し、SVGをサポートする他の最新のブラウザーでSVGを介してエミュレートすることができます。

Webkitベースのブラウザのマークアップの例：

<!DOCTYPE html>
<html><head>
<title>Foo</title>
</head><body>
    <div class="mask">
        <h1>Masked Text</h1>
    </div>
</body></html>

およびCss：

.mask {
    font-size:90px;
    font-family:Arial, sans;
    font-weight:700;
    background:white url(/image.jpg) repeat;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

こちらの作業例をご覧ください：http：//jsfiddle.net/Q9JWM/（ChromeとSafariでのみ動作します）

また、ここでは、マスクされたテキスト効果を実現するためのSVGエミュレーション実験を行っています。

于 2011-10-06T03:28:15.387 に答える
0

調べてくださいopacity。W3Cのドキュメントへのリンクは次のとおりです。そしてこれはおそらくスタックオーバーフローの質問です...しかし、CSSのポイントはプレゼンテーションを制御することです-エルゴ、ページのデザイン、したがってこのサイトの要件も満たします。

于 2011-10-05T13:06:25.843 に答える