IE中的CSS模糊文本答案

【问题标题】：CSS Blurry text in IEIE中的CSS模糊文本
【发布时间】：2015-12-22 02:58:36
【问题描述】：

我正在使用以下内容给文本一个模糊的效果：

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 的修复程序，但是有人知道解决此问题的方法吗？

【问题讨论】：

标签： internet-explorer css

【解决方案1】：

Here 是实现您想要的东西的 hack：

将文本本身“隐藏”到屏幕之外以仅显示阴影:)

似乎是目前唯一的解决方案...

【讨论】：

【解决方案2】：

IE10 及更高版本将 text-shadow 读取为 text-shadow: Xpx Xpx #colour;

换句话说，你把语法放错了。有关正确使用 text-shadow 的更多信息，请参阅 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; }

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

不客气:)

【讨论】：

您的代码和我的唯一区别是您定义了水平和垂直位置。这没什么区别。正如我的问题中提到的，我应用的透明颜色是导致问题的原因
通过代码定义水平和垂直位置，文本在 IE11 中的 JSFiddle 中可见，这仍然是一个改进。