在IE中使用文本陰影的透明文本

使用color: rgba(255,255,255,0.0);與text-shadow: 0px 0px 2px rgba(255,255,255,1);結合使用時，Internet Explorer似乎從文本本身繼承文本陰影的透明度，導致陰影根本不顯示。在IE中使用文本陰影的透明文本

的jsfiddle例子（IE視圖）： http://jsfiddle.net/495dZ/1/

是否有一個聰明僞類的技術來解決此問題？或者也許使用jQuery來實現類似的效果？

來源

2013-12-09 Elli Petersen

好像目前還沒有，據我可以告訴這樣做的方式。我認爲有理由不能設置顏色：＃000;或者你使用的是什麼背景顏色？ –

該評論給了我一個想法，將陰影從文本中移走的距離足夠遠，就好像文本不在那裏一樣。這可以在純色背景下正常工作，但是當與圖像一起使用時，文本將會顯示：http://jsfiddle.net/495dZ/8/ –

哪個版本的IE？ –

您可以隱藏窗口/屏幕邊緣的文本，也可以考慮爲舊版IE添加回退。

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>

來源

2014-01-03 17:05:28 apaul

這可能是最可靠的方法，具有後備的附加好處（最初並不是一項要求，不過不管怎麼說都不錯）。+50賞金 –

感謝您的想法。我不建議使用'position：absolute'，這可能並不總是可行，我建議你做一些事情：'text-shadow：2000px 0 3px #fff; margin-left：-4000px;'。 –

我不是100％肯定，如果這是你在問什麼，但IE9及以下不支持text-shadow財產。在IE10和IE11中，您的小提琴看起來與最新的Chrome相同。

我會建議使用條件來定位IE9/IE8/IE7並提供純文本。

來源

2014-01-04 07:15:58 Tomas

您可以通過將真實文本移出可視區域並調整文本陰影以補償實際文本偏移來欺騙IE。

這裏有一個演示 - http://jsfiddle.net/495dZ/36/

的基本原理：

.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 
}

這將在一定的情況下工作，並要求每個這些情況一個獨特的設置。（最有可能將父級的溢出設置爲hidden，所以偏移文本將不會被看到，有時您需要將其偏移到不同的方向，具體取決於上下文）

來源

2015-02-10 09:03:16 vsync

額外的text-shadow IE 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+ 
}

第二text-shadow定義覆蓋IE中的第一個10+而已，因爲IE 10+支持陰影的「傳播」第四長度值 - 見http://caniuse.com/#search=text-shadow

在其他的瀏覽器，如Chrome，第二個text-shadow定義覆蓋失敗，因爲它們不支持陰影的第四個長度值，因此它們將使用第一個定義text-shadow。

（確保第四屆「蔓延」值很小 - 所以你看不到任何渲染的差異。）

來源

2016-10-14 22:49:37 LosMikEos

在IE中使用文本陰影的透明文本

回答

相關問題