コンテンツを鮮明に保ちながら、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 サイトの他の関連記事を参照してください。