HTML5 CSS3 / Javascript模糊面具

时间:2011-04-04 23:35:17

标签: javascript html5 css3 mask blur

我们中的许多人正在寻找一种Javascript / CSS3解决方案,它可以在网页中提供类似Windows7的UI,而无需使用闪存。

我们需要一个不透明蒙版,圆形边框和一个模糊......

我们有不透明度和圆角边框,现在我们需要能够将一些模糊效果应用到半透明的Div。

我尝试了Pixastic Library中的BlurFast效果,但它只模糊了实际图像,而不是我们通过图像看到的背景......

基本上,我们希望Div作为模糊面具而不是其他内容......

如果有人真的成功了,我会很高兴知道它可能:)谢谢

3 个答案:

答案 0 :(得分:1)

http://t.co/fFLPKnzC

关于模糊的非常好的文章显示了最新技术

遗憾地“掩盖”页面的某些部分,模糊了所有内容,并非那么容易。 也许博客中的建议可以帮助你,因为它们非常直接,而且方向完全不同......

因此在svg中嵌入html并在以后的html元素上使用svg-filters

答案 1 :(得分:1)

认为这可能是相关的:Aero

就个人而言,我认为作者声称这是“换句话说,有史以来最混乱,最无效的实施之一”... AND 他可以获得效果在一个浏览器中工作......非常有说服力。

答案 2 :(得分:0)

目前无法有效地或跨浏览器进行此操作。

可能能够做到这一点的唯一方法是使用Pixastic在Canvas中创建模糊图像,导出为dataURI,然后使用该图像作为div的背景。如果div移动,那么背景图像的定位应相应移动。