模糊文本 | CSS-Tricks

使文本颜色透明，但添加阴影

.blur {
   color: transparent;
   text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

模糊

更多浏览器支持颜色而不是文本阴影，因此您可能需要执行功能检测。或者，保留颜色属性并进行足够的阴影，使其看起来仍然模糊 (演示).

Santosh

# 2011 年 2 月 12 日

不错的效果。

Jamy

# 2011 年 2 月 13 日

颜色：透明在 Gecko 和 Webkit 中运行良好，但它会隐藏 Opera 中的文本和文本阴影。

使用 color: rgba(0, 0, 0, 0) 以获得更好的跨浏览器兼容性。

Clay

# 2011 年 5 月 9 日

天哪，这真是太聪明了。我真不敢相信这么多年了，我一直没发现它。

将它与 JavaScript 结合起来，您可以使用伪深度效果构建相当不错的网站。

感谢您的灵感。

edward

评论永久链接# 2011 年 5 月 29 日

这些文本对搜索引擎友好吗？…
Nicklas

评论永久链接# 2012 年 5 月 16 日

@edward; 是的，它们是。文本仍然存在，与正常情况一样。唯一的区别是颜色是透明的，并且应用了模糊阴影。搜索引擎没有问题读取它。

sidd

# 2011 年 7 月 25 日

做得好

miaad

# 2011 年 11 月 27 日

嗨，Chris
不错的效果

Qazi Hamayun

# 2012 年 1 月 7 日

非常棒的技巧……:-)

andres

# 2012 年 2 月 21 日

哈哈，简单有效：)

lukasz

# 2012 年 9 月 8 日

在<IE9 中不起作用

Storm

评论永久链接# 2015 年 8 月 31 日

IE 必须死

Anurag

# 2013 年 1 月 3 日

天才代码：)

Adnan Moin

# 2013 年 2 月 5 日

不错

Ustun

# 2013 年 4 月 12 日

这在 IE10 中似乎不起作用，文本完全显示为透明。作为解决方法，我使用了以下方法

color: #cbcbcb;
text-shadow: 0 0 5px rgba(0,0,0,1);

不完美，但很接近。

Eli

# 2013 年 5 月 7 日

对我来说效果很好。我将它与 iOS 和 Android 设备上的 WebKit 配合使用。
谢谢！：)

Anubhav Saini

# 2013 年 7 月 6 日

text-shadow: 1px 1px 4px black, -1px -1px 4px black;
font-size: 3em;

使文本足够模糊。
小提琴

或彩色...

color: black;
text-shadow
2px 2px 4px #900,
-2px -2px 2px #009,
– 2px 2px #090,
2px -2px 2px #ff0;

帖子

srinivasan

# 2014 年 3 月 20 日

在 IE 浏览器中不起作用。我们对此有其他选择吗：)

tim geaney

# 2015 年 2 月 3 日

有没有办法可以慢慢地取消模糊文本。文本从模糊开始，然后变清晰？

Jay Harris

评论永久链接# 2015 年 4 月 30 日

对不起，Tim，这有点晚了，但这样做应该可以实现你的愿望。
小提琴

Toastrackenigma

# 2015 年 6 月 24 日

当然，最好直接使用 CSS 过滤器，如下所示？

.blur {
    -webkit-filter:blur(2px);
    -moz-filter:blur(2px);
    -o-filter:blur(2px);
    filter:blur(2px);
}

lucas

评论永久链接# 2015 年 12 月 30 日

CSS 过滤器几乎不受支持
XCanG

评论永久链接# 2017 年 3 月 11 日

对于今天，它支持得很好，这是制作模糊图像或其他 HTML 标签（而不是文本）的唯一方法。

Ajay

# 2017 年 3 月 3 日

不错的技巧：)

评论

发表回复 取消回复

发表回复取消回复