1

以下は Safari (モバイルとデスクトップの両方) とデスクトップ Chrome で動作しますが、モバイル Chrome はそれを無視するようです:

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

( http://jsfiddle.net/pMPPY/を参照)

モバイル Chrome で動作する Web ページのコンテンツをぼかす方法はありますか?

編集: モバイル Chrome では動作しないと最初に言いましたが、言い間違えました。当時、デフォルトの Android ブラウザが「モバイル Chrome」ではないことに気づきませんでした。デフォルトの Android ブラウザでは動作しないということです。ぼかしはモバイル Chrome でも機能する可能性があります (これは別のアプリであることがわかりました)。残念ながら、私は PhoneGap アプリに取り組んでいるので、それは私のプロジェクトには役に立ちません。そのため、Android ブラウザー エンジンを使用しています。混乱させて申し訳ありません。

4

2 に答える 2

2

モバイル クローム ページのサポートされている 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 に答える