在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中使用文本阴影的透明文本

回答

相关问题