하위 요소가 상위 CSS 흐림 효과를 상속받지 못하도록 방지하는 방법은 무엇입니까?

CSS 흐림 문제: 부모의 흐림 효과에서 하위 요소 제외

CSS를 사용하여 상위 요소에 흐림 필터를 적용할 때 하위 요소도 효과를 상속하는 것은 불가피합니다. . 그러나 절대 위치 지정을 사용하지 않고 이러한 흐릿함에서 하위 요소를 제외할 수 있는 솔루션이 있습니다.

이를 달성하려면 상위 div 내에 두 개의 중첩 div를 생성합니다. 하나는 배경용이고 다른 하나는 콘텐츠용입니다. 상위 div에 "위치:상대적"을 할당하고 "위치:절대; 상단:0px; 오른쪽:0px; 하단:0px; 왼쪽:0px;"를 할당합니다. (또는 높이/너비를 100%로 설정) 배경 div에 추가합니다. 이렇게 하면 배경 div가 상위 div를 완전히 덮을 수 있습니다.

배경 요소를 콘텐츠 요소에서 분리하면 배경 div에 적용된 흐림 필터가 텍스트나 기타 원하는 콘텐츠를 포함하는 하위 요소에 영향을 주지 않습니다.

예:

#parent_div {
  position: relative;
  height: 100px;
  width: 100px;
}

#background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: red;
  filter: blur(3px);
  z-index: -1;
}

<div></div>

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