1

以下适用于 Safari（移动和桌面）和桌面 Chrome，但移动 Chrome 似乎忽略了它：

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

（见http://jsfiddle.net/pMPPY/）

有没有办法模糊在移动 Chrome 上运行的网页内容？

编辑：我最初说它不适用于移动 Chrome，但我说错了。当时我没有意识到默认的 Android 浏览器不是“移动 Chrome”。我的意思是说它不适用于默认的 Android 浏览器。模糊可能适用于移动 Chrome（我刚刚意识到这是一个不同的应用程序）。不幸的是，这对我的项目没有帮助，因为我正在开发一个 PhoneGap 应用程序，所以它使用 Android 浏览器引擎。对困惑感到抱歉。

4

2 回答 2

2

我没有在移动 chrome 页面上支持的 html5 工具包列表中看到过滤器：https ://developers.google.com/chrome/mobile/docs/overview已授予，它没有被排除，但也没有明确提及。

但是我确实找到了这篇文章：对整个网页的模糊效果

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

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

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

小提琴的内容是：

<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;*/
}
于 2013-05-17T21:06:14.290 回答
0

当我们在 Chrome for Mobile 中登陆过滤器而不需要标志时，您的方法将起作用。

我刚刚在 N4 上测试了我稳定的 Chrome (M27) 版本，它可以工作。

模糊工作

于 2013-05-30T12:06:14.570 回答