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

Question

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

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

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

-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 値を設定していることに起因します。

リーリー リーリー