ホームページ > 記事 > ウェブフロントエンド > コンテンツを鮮明に保ちながら、CSS の要素の背景画像をぼかすにはどうすればよいですか?
コンテンツに影響を与えずに CSS で背景画像をぼかす
CSS では、コンテンツの背景画像をぼかしたい場合があります。要素内のコンテンツには影響を与えません。これを実現する方法は次のとおりです。
この解決策には、親要素の背景画像を継承する疑似要素 (:before) を作成することが含まれます。この疑似要素は絶対的に配置され、ぼかしフィルターが与えられます。 z-index を -1 に設定すると、コンテンツの背後に表示されます。
これを実装するには、次の CSS を適用します。
<code class="css">.blur-bgimage { overflow: hidden; margin: 0; text-align: left; } .blur-bgimage:before { content: ""; position: absolute; width : 100%; height: 100%; background: inherit; z-index: -1; filter : blur(10px); -moz-filter : blur(10px); -webkit-filter: blur(10px); -o-filter : blur(10px); transition : all 2s linear; -moz-transition : all 2s linear; -webkit-transition: all 2s linear; -o-transition : all 2s linear; }</code>
その後、JavaScript を使用してクラスを切り替えることができます (例: 'blur-bgimage') この CSS を目的の要素に適用し、必要に応じて背景画像をぼかしたりぼかしを解除したりします。
以上がコンテンツを鮮明に保ちながら、CSS の要素の背景画像をぼかすにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。