在另一张图片上设置背景透明度和模糊效果

Question

我正在处理一件事情，不想使用大图片，而是希望使用普通的背景颜色，并在其上添加一些透明度和模糊效果...

这里有一个例子：http://codecanyon.net/item/translucent-jquery-banner-rotator-slideshow/801607?WT.ac=search_item&WT.seg_1=search_item&WT.z_author=VF

那个滑块具有半透明和模糊的描述栏，这正是我想要的...

我在这里找到了另一个例子：http://www.blurjs.com/ 但我不想使用JavaScript。如果可以使用CSS3实现，那就太好了。

我不知道那个滑块是使用JavaScript还是CSS来实现的？

有人知道如何使用CSS编写类似的代码吗？谢谢你的时间。

- dvlden

---

我真的不明白为什么会有这么多的踩...除了一点点无知之外，他的问题似乎并没有违反常见问题解答。 - totallyNotLizards

所有这些演示都之所以使用javascript，是有原因的。赞成，因为这不是一个坏问题！ - frenchie

谢谢你们两位...嗯，那我就用blur.js吧。我别无选择。只是觉得可能有一种可能性可以用CSS3，因为我将会使用太多的JavaScript。 - dvlden

我不知道这怎么能算作一个“具体的编程问题”。 - cliffs of insanity

Answer 1

您提供的滑块使用了canvas元素, 需要javascript来操作。

仅使用CSS无法实现您想要的功能 - 您需要javascript，但SVG可能可以处理。但是我对SVG没有足够的经验来确定。

- x1a4