2013-12-09 10 views
5

text-shadow: 0px 0px 2px rgba(255,255,255,1);と組み合わせてcolor: rgba(255,255,255,0.0);を使用すると、Internet Explorerはテキストシャドウの透明度をテキスト自体から継承し、シャドウがまったく表示されないように見えます。IEのテキストシャドーを使用した透過テキスト

JSFiddle例(IEで表示): http://jsfiddle.net/495dZ/1/

この問題を回避するために巧妙な擬似クラスの技術はありますか?または何かjQueryを使って同様の効果を得ることができますか?

+0

思えます。色を設定することができない理由があると仮定します:#000;または使用している背景色は何ですか? –

+1

そのコメントは、テキストがそこにないように見えるテキストから十分に遠くに影を移動するという考えを私に与えました。これは、単色の背景でうまく動作しますが、画像とともに使用すると、テキストが表示されます。http://jsfiddle.net/495dZ/8/ –

+0

IEのバージョンは? –

答えて

1

ウィンドウや画面の端からテキストを隠すだけで、古いバージョンのIEでもフォールバックを追加することもできます。これはtext-shadowプロパティをサポートしていません以下のあなたが求めているものですが、IE9と場合

Working Example

.black-box { 
    background: url(http://i44.tinypic.com/2rzwis3.jpg) no-repeat; 
    padding: 20px; 
} 
span.shadow { 
    font: 20px Arial; 
    position: absolute; 
    left:-100px; 
    top:-100px; 
    color: rgba(0, 0, 0, 1); 
    text-shadow: 120px 120px 2px rgba(255, 255, 255, 1); 
} 

<!--[if lte IE 9]> 
    <style> 
    span.shadow { 
     position: static; 
     display:inline-block; 
     font: 20px Arial; 
     color: rgba(255, 255, 255, 1); 
     filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=2.25); 
     } 
    </style> 
<![endif]--> 

<div class="black-box"> 
    <span class="shadow">This is some text.</span> 
</div> 
+1

これはおそらく最も信頼性の高い方法で、フォールバックの利点が追加されています(元々要件ではありませんでしたが、無関係です)。+50 bounty –

+0

ありがとうございました。 'position:absolute'を使うのではなく、いつも可能ではないかもしれません。' text-shadow:2000px 0 3px #fff; margin-left:-4000px; ' –

0

は、私は100%を確認していません。 IE10とIE11では、あなたのフィドルは最新のChromeと同じように見えました。

私は条件付きでIE9/IE8/IE7をターゲットにしてプレーンテキストを提供することをお勧めします。

1

IEをトリックするには、表示可能領域から実際のテキストを移動し、実際のテキストオフセットを補正するためにテキストシャドウを調整します。これは、特定の状況で動作し、それらの各状況のためのユニークなセットアップが必要になります

.shadow { 
    display:inline-block; 
    color:#FFF; // the color will control the text-shadow color 
    text-indent:-999px; // offsetting the "real" text 
    text-shadow:999px 1px 3px; // fixing the offset of the text shadow 
} 

http://jsfiddle.net/495dZ/36/

基本原理 -

はここでデモです。 (hiddenに親のオーバーフローを設定する可能性が最も高いので、オフセットテキストは表示されません。また、時にはあなたは、コンテキストに応じて、異なる方向にそれを相殺する必要があります)

1

IEのための余分なtext-shadow定義は10+行いますトリック:

.transparent-text-with-shadow { 

    color:   transparent;       // or rgba(0,0,0,0); 
    text-shadow: rgba(0,0,0,1) 0px 0px 10px;    // for Chrome etc. 
    text-shadow: rgba(0,0,0,1) 0px 0px 10px 0.01em;  // for IE 10+ 
} 

IEは10+影の「普及」のための第四の長さの値をサポートしているため、2番目のtext-shadow定義は、唯一10+ IEの最初のを上書きする - など、他のブラウザではhttp://caniuse.com/#search=text-shadow

を見ます二番目のクロム、text-shadow定義上書きは、シャドウの4番目の長さの値をサポートしていないため失敗し、最初のtext-shadow定義を使用します。

(確認してください4番目の値が非常に小さい「スプレッド」 - あなたはすべてのレンダリングの違いを見ることができないようにします。)現在、私の知る限りこれを行う方法はありませんように

関連する問題