背景画像に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 値の違いによるものです。

リーリー リーリー