透明文本与文本阴影在IE中 [英] Transparent text with text-shadow in IE
问题描述
当使用 color:rgba(255,255,255,0.0); 结合使用
text-shadow:0px 0px 2px rgba(255,255,255,1)
,Internet Explorer似乎从文本本身继承文本阴影的透明度,导致阴影完全不显示。
When using color: rgba(255,255,255,0.0);
in conjunction with text-shadow: 0px 0px 2px rgba(255,255,255,1);
, Internet Explorer seems to inherit the transparency of the text-shadow from the text itself, causing the shadow not to appear at all.
JSFiddle示例(在IE中查看):
http://jsfiddle.net/495dZ/1/
JSFiddle example (view in IE): http://jsfiddle.net/495dZ/1/
有一个聪明的伪类技术来解决这个问题吗?或者使用jQuery来实现类似的效果?
Is there a clever pseudo-class technique to work around this? Or maybe something using jQuery to achieve a similar effect?
推荐答案
你可以隐藏窗口/屏幕边缘的文本,请考虑为旧版本的IE添加备用版本。
You could just hide the text off the edge of the window/screen, consider adding a fallback for older versions of IE as well.
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>
这篇关于透明文本与文本阴影在IE中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!