以下内容适用于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;*/
}