I have had to implement something similar to this. I just used a transparent PNG (well, obviously most of the PNG was NOT transparent) with little pockets of transparency. Just enough so the user could get a hint of the text, but not really see it. Not really a blur - more like what the board game Outburst does before you put the card behind the red decoder thing. I just set the background image of an overlay div to the PNG and resize accordingly.
how about using the sliding doors technique? you could have a small vertical sliced png that "simulates" a slice of blurred text with two rounded edge blur pieces to cap off each side. you could then create an overlay/toggled div with this blurring imageset that is similar width to the number of characters of the word and hide the word.
发布评论
评论（4）
我不得不实施类似的事情。我只是使用了一个透明的 PNG（嗯，显然大部分 PNG 不是透明的）和一些透明的东西。足以让用户获得文本的提示，但不能真正看到它。并不是真正的模糊 - 更像是棋盘游戏 Outburst 在你将卡放在红色解码器后面之前所做的事情。我只是将覆盖 div 的背景图像设置为 PNG 并相应地调整大小。
I have had to implement something similar to this. I just used a transparent PNG (well, obviously most of the PNG was NOT transparent) with little pockets of transparency. Just enough so the user could get a hint of the text, but not really see it. Not really a blur - more like what the board game Outburst does before you put the card behind the red decoder thing. I just set the background image of an overlay div to the PNG and resize accordingly.
您可以使用 CSS3 来做到这一点：
编辑更多信息：目前仅适用于基于 WebKit 的浏览器。跨浏览器文本阴影信息如下：
创建跨浏览器兼容的 CSS 文本阴影
You could do this with CSS3:
Edit with more info: Currently only works in WebKit based browsers. Cross-browser text shadow info here:
Creating Cross Browser Compatible CSS Text Shadows
使用推拉门技术怎么样？你可以有一个小的垂直切片 png，它“模拟”一片模糊的文本，并用两个圆形边缘模糊块来封闭每一侧。然后，您可以使用这个模糊图像集创建一个覆盖/切换的 div，其宽度与单词的字符数相似，并隐藏该单词。
how about using the sliding doors technique? you could have a small vertical sliced png that "simulates" a slice of blurred text with two rounded edge blur pieces to cap off each side. you could then create an overlay/toggled div with this blurring imageset that is similar width to the number of characters of the word and hide the word.
这里有一些使用 css3 执行此操作的示例： http://css-tricks .com/9053-fun-with-blurred-text/
There are some examples of doing this using css3 here: http://css-tricks.com/9053-fun-with-blurred-text/