android - 有没有一种方法可以在 Android 浏览器上使用来模糊网页的内容？

Question

以下适用于 Safari(移动和桌面)和桌面 Chrome，但移动 Chrome 似乎会忽略它:

body {
  -webkit-filter: blur(4px);
}

(参见 http://jsfiddle.net/pMPPY/)

有没有办法模糊适用于移动版 Chrome 的网页内容？

编辑:我最初说它不适用于移动版 Chrome，但我说错了。当时我没有意识到默认的 Android 浏览器不是“移动版 Chrome”。我的意思是说它不适用于默认的 Android 浏览器。模糊可能适用于移动 Chrome(我刚刚意识到这是一个不同的应用程序)。不幸的是，这对我的元素没有帮助，因为我正在开发 PhoneGap 应用程序，因此它使用 Android 浏览器引擎。抱歉造成混淆。

Answer 1

我在移动 Chrome 页面支持的 html5 套件列表中没有看到过滤器:https://developers.google.com/chrome/mobile/docs/overview当然，它没有被排除，但也没有明确提及。

不过我确实找到了这篇文章:Blur effect on the entire webpage

哪个链接到这个 jsFiddle:http://jsfiddle.net/9qnsz/2/

这成功地模糊了页面并且不需要不可用的工具包。

它不是非常干净，您只是覆盖多个控件并使它们半透明，但它可能对您想要完成的任何事情都有用。

fiddle 的内容是:

<div class="container">
<div class="overlay">
    <p>Please register etc etc...</p>
</div>

<form action="javascript:;" class="form0">
    <input type="text" value="Username" />
    <input type="text" value="Password" />
    <button>Submit</button>
</form>
<form action="javascript:;" class="form1">
    <input type="text" value="Username" />
    <input type="text" value="Password" />
    <button>Submit</button>
</form>
<form action="javascript:;" class="form2">
    <input type="text" value="Username" />
    <input type="text" value="Password" />
    <button>Submit</button>
</form>
<form action="javascript:;" class="form3">
    <input type="text" value="Username" />
    <input type="text" value="Password" />
    <button>Submit</button>
</form>
<form action="javascript:;" class="form4">
    <input type="text" value="Username" />
    <input type="text" value="Password" />
    <button>Submit</button>
</form>

.container {
width:500px;
height:500px;
position:relative;
border:1px solid #CCC;
}
form {
    position:absolute;
    left:10px;
    top:10px;
}
form.form0 {
    left:11px;
    top:11px;
    opacity:0.1;
}
form.form1 {
    left:8px;
    top:8px;
    opacity:0.1;
    zoom:1.02;
}
form.form2 {
    left:11px;
    top:11px;
    opacity:0.1;
    zoom:1.01;
}
form.form3 {
    left:9px;
    top:9px;
    opacity:0.2;
}
form.form4 {
    left:11px;
    top:11px;
    opacity:0.1;
}

.overlay {
    width:250px;
    height:250px;
    margin-top:50px;
    margin-left:auto;
    margin-right:auto;
    border:1px solid #666;
/*        background:#FFF;*/
}