背景画像に CSS フィルター効果を使用する方法
P粉022285768
P粉022285768 2023-08-20 13:28:36
0
2
483
<p>検索ページの背景画像として使用している JPEG ファイルがあり、Backbone.js コンテキストで作業しているため、CSS を使用して設定しています。</p> <pre class="brush:php;toolbar:false;">background-image: url("whatever.jpg");</pre> <p>CSS 3 のぼかしフィルターを背景のみに適用したいのですが、その要素だけをスタイル設定する方法がわかりません。試してみると: </p> <pre class="brush:php;toolbar:false;">-webkit-filter:blur(5px); -moz-フィルター: ぼかし(5px); -o-フィルター: ぼかし(5px); -ms-filter: ぼかし(5px); フィルター:blur(5px);</pre> <p>上記のコードを CSS の <code>background-image</code> の下に配置すると、背景だけでなくページ全体のスタイルが設定されます。画像だけを選択してその画像にフィルターを適用する方法はありますか?あるいは、ページ上の他の要素のぼかし効果をオフにする方法はありますか? </p>
P粉022285768
P粉022285768

全員に返信(2)
P粉491421413

######ペン######

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

を実現します。

リーリー リーリー

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

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

いいねを押す +0
P粉270842688

これを表示ノートブック

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

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

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

リーリー リーリー
いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート