背景画像に CSS フィルター効果を使用する方法
P粉022285768
2023-08-20 13:28:36
<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>
######ペン######
追加の要素の必要性がなくなり、コンテンツが他のソリューションのように固定/絶対的になるのではなく、ドキュメント フローに適合できるようになります。 次の方法を使用して、
を実現します。リーリー リーリー
を使用し、左と上に -5% を使用します。これにより、背景画像がわずかに拡大されますが、エッジから単色がにじみ出ることはありません。提案してくれた Chad Fawcett に感謝します。
リーリー リーリー
これを表示ノートブック。
2 つの異なるコンテナーを使用する必要があります。1 つは背景画像用、もう 1 つはコンテンツ用です。
この例では、
.background-image
と.content
という 2 つのコンテナーを作成しました。これらはすべて、位置決めに
position:fixed
とleft:0; right:0;
を使用します。表示の違いは、要素に設定されたz-index
値の違いによるものです。