文本模糊的最佳解决方案+所有浏览器支持 - 后备创意?

时间:2013-05-22 08:34:26

标签: css3 text internet-explorer-8 internet-explorer-9 blur

我需要你的建议。

对于电子书网上商店,我需要显示部分文本,并部分显示“伪”模糊文本: 这是我做的不同测试的示例链接: http://dokumente-online.com/test-blur.html

这应仅用作效果,因此后面的文本应该具有真实文本的结构(字体大小,章节),但事实上它只是“lorem ipsum”或其他什么。它应该只告诉客户“还有更多,看起来像这样”

第一个想法是:图像模糊。 Con:它总是相同的图片,如果文本格式不同,它可能会误导。

使用CSS3,我可以使用这种模糊效果,适用于大多数现代浏览器:

`color: rgba(94,94,94,0);
  text-shadow: 0 0 11px rgba(50,50,50, .7);`    

到目前为止适用于chrome,firefox,safari和opera。

但是我可以用通常的神经 Internet Explorer做什么呢? 即使在IE10上也不支持text-shadow 不支持RGBa()

目前我使用browsershot.org进行测试,这让我很困惑: http://browsershots.org/http://dokumente-online.com/test-blur.html 看起来在IE8和IE9上没有任何模糊效果正常工作,而使用IE10甚至RGBa(第一版)应该可以正常工作。但它不适用于我的Windows 7系统(也许在Windows 8上它可以吗?)。 我看到过滤器:模糊可能在IE8和IE9中工作(但我只能用IE10版本测试)

你有过类似的问题吗?有完全不同的解决方案吗?

即使没有javascript也必须工作,所以如果我使用jquery插件我需要一些解决之前(javascript设置为黑色的白色textcolor)

1 个答案:

答案 0 :(得分:0)

使用过滤器过滤器有三个颜色,方向和强度参数。方向被视为一个角度,接近2px X和2px Y偏移,135度方向(135度是90度加45度),强度为2

  filter: progid:DXImageTransform.Microsoft.Shadow(direction=135,strength=2,color=ff0000);