흐린 배경을 유지하면서 하위 요소에서 배경 흐림을 제거하는 방법은 무엇입니까?

하위 요소에서 배경 흐림 제거

배경 이미지에 블러 효과를 적용한 것입니다. 그러나 모든 하위 요소도 이 흐림의 영향을 받으므로 바람직하지 않습니다. 이 문서에서는 하위 요소의 선명도를 유지하면서 배경 이미지의 흐림 효과를 유지할 수 있도록 이 문제를 해결하는 솔루션을 제공합니다.

해결책: 오버레이 요소 생성

이를 달성하려면 별도의

상위 요소 내에서 이 새 요소에 배경 이미지와 흐림 효과를 적용합니다. 그런 다음 z-index 값을 사용하여 이 요소를 기존 하위 요소 뒤에 배치합니다.

수정된 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>

이 설정에서 .overlay 요소에는 흐림 효과가 적용되는 반면, .opacity 요소는 이 효과가 하위 요소에 도달하는 것을 차단하여 흐릿한 배경 위에 선명하고 집중된 하위 요소를 만듭니다.

위 내용은 흐린 배경을 유지하면서 하위 요소에서 배경 흐림을 제거하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!