テキストを含むオブジェクト (スパンまたは div など) があります。そして、このテキストは、オブジェクトの色付きの背景をマスクして、背景 (body 要素など) が見えるようにする必要があります。
「マスク画像」があることは知っています。しかし、彼らはこの CSS3 手法をさらに発展させたくありません。おそらく誰でもこれを見ることができるJavascriptソリューションはありますか？
このクロスブラウザを行う機会はありますか?
2 に答える
0
完全なクロスブラウザー サポート (テキスト内の各文字に画像を使用せずに) に最も近いのは、ここに示されている非常に限定されたトリックです。ただし、これらのトリックは写真の背景画像では機能しません。
IE8 以前のサポートが必要ない場合は、SVG または Canvas でこれを行うことを調査できます。ただし、3.0 より前の Android は SVG をサポートしていないことに注意してください。これにより、既存の Android デバイスの 85% が除外されます。
Webkit には独自のbackground-clip:textスタイルがありますが、Chrome と Safari でのみ動作します。
テキストに使用color:transparentしても、これにはまったく役に立たないことが判明しました。
全体として、特に IE8 以前の VML 代替を提供する JS ライブラリまたは jQuery プラグインを見つけることができる場合 (VML ソリューションがテキスト マスクをサポートしていると仮定)、または適切なテキスト マスクがなくても適切に見える IE8 以前の -degradation フォールバック オプション。
見過ごされがちなもう 1 つの解決策: ページ上の現在のテキストを使用してサーバー上で画像を動的にレンダリングし (必要に応じてキャッシュする)、その画像をクライアントに提供できる場合、クロスブラウザーの問題に対処する必要はありません。 . これは、たとえば、GD グラフィックス ライブラリを使用して PHP で実行できる可能性があります。
于 2012-08-11T22:48:17.493 に答える
0
これを javascript や html で行う手法が思い浮かびません。ただし、使用できるアプローチ（完全に望ましいわけではありませんが、これには時間がかかることは承知しています）は、.png文字ごとに透明を作成し、文字の背景を透明に設定し、画像の残りの部分を透明に設定することです。いくつかの色を使用してから、それらを使用します。使用したい色ごとにセット全体を作成する必要があります。また、単語の 1 つであるイメージを作成し、.pngそれを使用する方が簡単です。これは、新しい技術が利用できない IE6 などの古いブラウザを含むすべてのブラウザでこれを機能させる唯一の現在の方法です。
私の意見では、これが現在機能しない理由は、<div>またはの中に<span>テキストがある場合、テキストが透明であっても、デフォルトで<div>またはの色になるだけだからです<span>。背景が透明に設定されている場合、何も表示されません。逆に、色が設定されている場合、テキストはその色を継承するだけなので表示されません。
于 2012-08-11T23:34:13.600 に答える