9

Windows Aero や iOS7 のような不透明ぼかしオーバーレイを作成したいと考えています。残念ながら、filter: blur()またはfilter: url(#svgBlur)プロパティは要素にのみ適用でき、その背後にあるコンテンツには適用できません。

これを回避するには、ぼやけた背景のコピーが必要です。background: -moz-element(#elementId)これは、実験的な CSS プロパティを使用する FX で可能です。それを使用して、 FXのみで必要な効果を得ることができます。

ぼやけの問題を解決するには他にも 質問があり、 1 つの解決策はhtml2Canvasプラグインを使用することです。

ただし、手動で再作成されたスタイルなどを含む、ぼやけたコンテンツ全体を再作成しています。これは非常に印象的な作業ですが、この種の効果としては (パフォーマンスとサイズの両方で) やり過ぎのように思えます。

私がやりたいのは、 のためだけのある種のシムを作成することです-moz-element。SVG を使用して可能であるforeignObjectように見えますが、セキュリティ上の問題があり、HTML が有効な XML でない場合は失敗します。

-moz-elementオーバーレイされた領域全体を解析/再描画する必要がない (キャンバス、SVG、または他の何かを使用して) エミュレートする方法はありますか?

4

3 に答える 3

2

BackgroundImage疑似入力をサポートするブラウザでは、要素の背後にあるコンテンツをフィルタリングできます。Opera 12 はそれをサポートしており、おそらく他のいくつかの UA もサポートしています。

Opera 12 は、外部の外部オブジェクトを持つ SVG 1.2 Tiny機能もサポートしていると思います。

<foreignObject xlink:href="external file url"/>

これを backgroundImage と組み合わせて、html コンテンツが有効な XML でない場合でも、html コンテンツを背景として使用できます。

ただし、マイレージは他のUAによって異なる場合があり、Firefoxには別のソリューションがあると言います。

于 2013-09-20T14:39:12.770 に答える
-5

これらのプロパティが選択した要素にのみ適用される場合、それらすべてを選択してみませんか?

たぶん：

#myElementID *
于 2013-09-20T15:37:15.373 に答える