CSS の子要素にぼかし効果が及ばないようにするにはどうすればよいですか?

子要素のぼかし効果をキャンセル

があります。ぼかした背景画像を使用しますが、ぼかし効果はその子要素にも適用されます。これに対処するには、次のアプローチを検討してください。

別の

を作成します。親 div 内で背景画像とぼかし効果を割り当てます。この div の z-index が不透明 div よりも低いことを確認してください。

HTML:

<code class="html"><div class="content">
    <div class="overlay"></div>
    <div class="opacity">
        <div class="image">
            <img src="/static/imghwm/default1.png" data-src="images/zwemmen.png" class="lazy" alt="">
        </div>
        <div class="info">
             a div wih all sort of information
        </div>
    </div>
</div></code>

CSS:

<code class="css">.content {
    float: left;
    width: 100%;
}

.content .overlay {
    background-image: url('images/zwemmen.png');
    height: 501px;
    -webkit-filter: blur(3px);
    -moz-filter: blur(3px);
    -o-filter: blur(3px);
    -ms-filter: blur(3px);
    filter: blur(3px);
    z-index: 0;
}

.opacity {
    background-color: rgba(5, 98, 127, 0.9);
    height: 100%;
    overflow: hidden;
    position: relative;
    z-index: 10;
}</code>

これにより、

が作成されます。子要素には影響を与えずに、ぼかした背景画像が含まれます。

以上がCSS の子要素にぼかし効果が及ばないようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。