モバイル クローム ページのサポートされている 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;*/
}