CSS에서 하위 요소가 흐림 효과를 상속하는 것을 방지하는 방법은 무엇입니까?

CSS를 사용하여 하위 요소에 대한 흐림 효과 제거

상위 요소에 CSS 흐림 효과를 사용할 때 하위 요소도 흐림을 상속하는 문제가 발생하는 것이 일반적입니다. 이 문제를 해결하려면 상위 div 내에 별도의 div를 만들고 대신 흐림 효과를 적용하면 됩니다.

구현

1. 콘텐츠 div 내에 추가 div를 추가하고 클래스(예: 오버레이).

<code class="html"><div class="content">
  <div class="overlay"></div>
  <div class="opacity">
    <!-- Child elements... -->
  </div>
</div></code>

2. CSS에서 흐림 효과와 배경 이미지를 오버레이 div에 할당하여 Z-색인이 불투명도 div보다 낮도록 합니다.

<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>

오버레이 div에 더 낮은 Z-색인을 지정하면 불투명 div 내의 하위 요소가 그 위에 배치되어 흐림 효과의 영향을 받지 않습니다.

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