흐림 필터가 하위 요소에 영향을 미치는 것을 방지하는 방법은 무엇입니까?

하위 요소에 대한 흐림 효과를 제거하는 방법

상위 요소에 흐림 필터를 적용할 때 때때로 다음과 같이 하위 요소에 영향을 줄 수 있습니다. 잘. 이러한 바람직하지 않은 효과를 방지하려면 상위 요소 내에 추가 div를 생성하는 것이 현명한 해결책입니다.

해결책:

1. 오버레이 Div:

   흐림 효과와 일치하는 배경 이미지가 있는 상위 요소 내에 div를 중첩합니다. 상위 div보다 낮은 Z-index를 할당합니다.

   <code class="html"><div class="content">
       <div class="overlay"></div>
       <div class="opacity">...</div>
   </div></code>

2. 오버레이 Div에 흐림 효과 적용:

   흐림 효과 적용 CSS를 사용하여 상위 div 대신 오버레이 div에:

   <code class="css">.content .overlay {
       background-image: url('...');
       -webkit-filter: blur(3px);
       -moz-filter: blur(3px);
       -o-filter: blur(3px);
       -ms-filter: blur(3px);
       filter: blur(3px);
       z-index: 0;
   }</code>

3. 불투명 Div를 전면에 배치:

   불투명 div는 다음과 같아야 합니다. 더 높은 Z-색인을 사용하여 오버레이 div 앞에 배치합니다.

   <code class="css">.opacity {
       z-index: 10;
   }</code>

이 접근 방식의 이점:

• 흐림 효과는 오버레이 div 내에 포함되어 하위 요소에 영향을 미치지 않도록 합니다.
• 불투명 div를 사용하면 흐림 효과를 방해하지 않고 콘텐츠의 불투명도 및 기타 속성을 제어할 수 있습니다.

위 내용은 흐림 필터가 하위 요소에 영향을 미치는 것을 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!