internet-explorer - IE中的CSS模糊文本

我正在使用以下内容给文本带来模糊效果：

HTML：

<h1 class="blur">Blurry text here</h1>

CSS：

.blur {
    text-shadow: 0 0 2px #333333;
    filter: progid:DXImageTransform.Microsoft.Chroma(color=#333333),
            progid:DXImageTransform.Microsoft.MotionBlur(strength=0, direction=0),
            progid:DXImageTransform.Microsoft.Blur(pixelradius=2);
    color: transparent;
}

这是预览的JSFiddle。

它在FF，Chrome和IE8中或多或少都可以完美地工作，但是在IE11中进行测试时，文本是不可见的。

我知道这是由于color: transparent;引起的，但是如果我将其更改为color: rgba(0,0,0, 0.5);之类的东西，则模糊几乎是不可见的。

我从没想过我必须找到针对IE11而不是IE8的修复程序，但是有人知道可以解决此问题吗？

最佳答案

IE10及更高版本将文本阴影读取为文本阴影：Xpx Xpx #colour;

换句话说，您错误地输入了语法。有关正确使用文本阴影的详细信息，请参见here。

你把：
.blur { text-shadow: 0 0 2px #333333; filter: progid:DXImageTransform.Microsoft.Chroma(color=#333333), progid:DXImageTransform.Microsoft.MotionBlur(strength=0, direction=0), progid:DXImageTransform.Microsoft.Blur(pixelradius=2); color: transparent;}

放...
.blur { text-shadow: 2px 2px 2px #333333; filter: progid:DXImageTransform.Microsoft.Chroma(color=#333333), progid:DXImageTransform.Microsoft.MotionBlur(strength=0, direction=0), progid:DXImageTransform.Microsoft.Blur(pixelradius=2); color: transparent;}

...似乎可以解决您的问题。

别客气 ：）