以下内容适用于Safari(移动和台式机)和台式机Chrome,但移动版Chrome似乎忽略了它:

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


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

有没有一种方法可以模糊可在移动Chrome上运行的网页的内容?

编辑:我最初说它不能在移动Chrome上运行,但是我打错了。当时我还没有意识到默认的Android浏览器不是“移动Chrome浏览器”。我的意思是说它无法在默认的Android浏览器上运行。模糊效果可能适用于移动Chrome(我刚刚意识到这是一个不同的应用)。不幸的是,由于我正在使用PhoneGap应用程序,因此这对我的项目无济于事,因此它使用了Android浏览器引擎。对困惑感到抱歉。

最佳答案

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

但是,我确实找到了这篇文章:Blur effect on the entire webpage

链接到此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;*/
}

07-24 09:45
查看更多