背景画像にCSSフィルターを適用する方法
P粉675258598
P粉675258598 2023-08-23 14:06:46
0
2
510
<p>検索ページの背景画像として使用する JPEG ファイルがあり、Backbone.js コンテキストで作業しているため、CSS を使用して設定しています。</p> <pre class="brush:php;toolbar:false;">background-image: url("whatever.jpg");</pre> <p>背景にのみ CSS 3 ぼかしフィルターを<em>/em>適用したいのですが、その要素だけをスタイル設定する方法がわかりません。試してみると: </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粉675258598
P粉675258598

全員に返信(2)
P粉521697419

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

他のソリューションのように固定/絶対的なコンテンツではなく、ドキュメント フローにコンテンツを適合させながら、追加の要素の必要性を排除します。 実装を使用する

リーリー リーリー

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

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

いいねを押す +0
P粉316423089

このペンを見てください。

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

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

両方とも position:fixedleft:0;right:0; として配置されます。示されている違いは、要素に異なる z-index 値を設定していることに起因します。

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