ややこしいかもしれませんので、説明させてください。
1 つの巨大な画像を含むページがあります。
+-------------+
| |
| |
| image |
| |
| |
+-------------+
このページでは、下の画像のぼやけたバージョンとして、背景にコンテンツを重ねようとしています。
+-------------+
| image |
| |
| +-+ +-+ |
| |b| |b| |
| +-+ +-+ |
+-------------+
現在、コンテンツ内に div を追加して、div の場所に背景画像が逆に配置されているようにしています。次に、この画像に css3 属性が適用されますblur: ?px.
例については、こちらを参照してください: http://jsfiddle.net/Z83wR/1/
ページにたくさんのボックスがある場合を除いて、うまく機能します。表示するボックスが多いほど、必要な背景画像が多くなり、ぼかしが必要な画像も多くなり、その結果、動的な相互作用 (フェード、トランジションなど) がギザギザ/遅延します。
これを最適化するにはどうすればよいですか?
編集:言い忘れましたが、これはクロム拡張 Web アプリであり、これらの画像をダウンロードして事前にぼかしを入れる機能はありません。また、すべての画像は外部ドメインからのものであるため、キャンバスを使用できません