背景画像に CSS フィルター効果を使用する方法

Question

検索ページの背景画像として使用している JPEG ファイルがあり、Backbone.js コンテキストで作業しているため、CSS を使用して設定しています。

background-image: url("whatever.jpg");

CSS 3 のぼかしフィルターを背景のみに適用したいのですが、その要素だけをスタイル設定する方法がわかりません。試してみると:

-webkit-filter:blur(5px);
-moz-フィルター: ぼかし(5px);
-o-フィルター: ぼかし(5px);
-ms-filter: ぼかし(5px);
フィルター:blur(5px);

上記のコードを CSS の background-image の下に配置すると、背景だけでなくページ全体のスタイルが設定されます。画像だけを選択してその画像にフィルターを適用する方法はありますか?あるいは、ページ上の他の要素のぼかし効果をオフにする方法はありますか?

Answer 1

＃＃＃＃＃＃ペン＃＃＃＃＃＃

追加の要素の必要性がなくなり、コンテンツが他のソリューションのように固定/絶対的になるのではなく、ドキュメント フローに適合できるようになります。 次の方法を使用して、

を実現します。

リーリー リーリー

編集

端の白い境界線を削除したい場合は、幅と高さに

110%

を使用し、左と上に -5% を使用します。これにより、背景画像がわずかに拡大されますが、エッジから単色がにじみ出ることはありません。提案してくれた Chad Fawcett に感謝します。 リーリー リーリー

Answer 2

これを表示ノートブック。

2 つの異なるコンテナーを使用する必要があります。1 つは背景画像用、もう 1 つはコンテンツ用です。

この例では、.background-image と .content という 2 つのコンテナーを作成しました。

これらはすべて、位置決めに position:fixed と left:0; right:0; を使用します。表示の違いは、要素に設定された z-index 値の違いによるものです。

リーリー リーリー