하위 요소를 흐리게 하지 않고 상위 Div를 흐리게 하는 방법은 무엇입니까?

상위 Div를 흐리게 할 때 하위 요소가 흐려지지 않도록 하는 방법(절대 위치 지정 없음)

흐림과 같은 CSS 필터를 사용하여 상위 div를 흐리게 하면 바람직하지 않을 수 있습니다. 하위 요소도 흐리게 처리합니다. 그러나 절대 위치 지정에 의존하지 않고 상위 div에만 흐림 효과를 격리하는 솔루션이 있습니다.

내부 요소 만들기

상위 div를 두 개의 내부 요소로 나눕니다. :

• 배경: 흐린 배경
• 콘텐츠: 흐릿하지 않은 요소 포함

위치 요소

다음 스타일을 적용합니다.

• #parent_div: 위치 설정: 기준 내부 요소의 절대 위치 지정을 허용합니다.
• #배경: 위치 사용: 절대; 상단: 0; 오른쪽: 0; 하단: 0; 왼쪽: 0; (또는 높이/너비: 100%) 상위 div 위에 정확하게 배치합니다.
• #content: 기본 위치 유지: 정적.

블러 적용

필터: 흐림(3px) 또는 -webkit-filter: 흐림(3px)을 #배경에 적용합니다. #parent_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;
}

#content {
  /* No special positioning required */
}

위 내용은 하위 요소를 흐리게 하지 않고 상위 Div를 흐리게 하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!