検索ページの背景画像として使用している 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 のすぐ下に、背景だけでなくページ全体のスタイルが設定されています。画像だけを選択してフィルターを適用する方法はありますか？あるいは、ページ上の他の要素のぼかし効果をオフにする方法はありますか?
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
＃＃＃＃＃＃ペン＃＃＃＃＃＃
追加の要素の必要性を排除し、他のソリューションのように固定/絶対的なものではなく、コンテンツをドキュメントの流れに適応させます。これを達成するには、次の方法を使用します:
リーリー リーリー
を使用し、左と上に-5%を使用します。これにより、背景がわずかに拡大されますが、エッジから単色がにじみ出ることはありません。提案してくれた Chad Fawcett に感謝します。
リーリー リーリーこれを見るペン。
2 つの異なるコンテナを使用する必要があります。1 つは背景画像用、もう 1 つはコンテンツ用です。
この例では、
.background-imageと.contentという 2 つのコンテナーを作成しました。これらはすべて、位置決めに
position:fixedとleft:0; right:0;を使用します。表示の違いは、要素に設定されたz-index値の違いによるものです。