상위 요소에 흐림 효과를 적용할 때 하위 요소를 선명하게 유지하는 방법은 무엇입니까?

흐린 배경에서 하위 요소를 선명하게 유지

상위 요소에 흐림 효과를 적용하면 이 효과가 해당 요소까지 확장될 수 있습니다. 하위 요소로 인해 콘텐츠가 모호해집니다. 하위 요소가 원치 않게 흐려지는 것을 방지하기 위한 솔루션이 있습니다.

상위 요소 내에 새 div를 만들고 흐림 효과가 있는 배경 이미지를 할당합니다. 오버레이보다 낮은 Z-색인을 제공하여 이 div를 하위 요소 뒤에 배치합니다. 다음 코드 구조를 사용하세요.

<code class="html"><div class="content">
    <div class="overlay"></div>
    <div class="opacity">
        <div class="image">
            <img src="images/zwemmen.png" alt="" />
        </div>
        <div class="info">
            <!-- Information content -->
        </div>
    </div>
</div></code>

불투명도 div는 영향을 받지 않고 오버레이 div에 흐림 효과를 적용합니다. CSS 코드:

<code class="css">.content .overlay {
    background-image: url('images/zwemmen.png');
    -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);
    z-index: 10;
}</code>

위 내용은 상위 요소에 흐림 효과를 적용할 때 하위 요소를 선명하게 유지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!