하위 요소를 흐리게 하지 않고 Div의 배경을 흐리게 하려면 어떻게 해야 합니까?

하위 요소에 영향을 주지 않고 Div 흐리게 하기: 가이드

div에 흐리게 처리를 적용할 때 사용자가 의도치 않게 Div를 흐리게 처리하는 문제에 직면하는 경우가 많습니다. 하위 요소도 흐리게 처리합니다. 이 문제를 해결하려면 CSS의 흐림 및 불투명도 속성 제한을 이해하는 것이 중요합니다. 기본적으로 이러한 속성은 내부의 상위 요소와 하위 요소 모두에 영향을 미칩니다.

대체 솔루션: 콘텐츠와 배경 분리

하위 요소가 흐려지는 것을 방지하려면 실행 가능한 솔루션은 다음과 같습니다. 상위 div 내에 두 개의 개별 요소를 생성합니다. 하나는 배경용이고 다른 하나는 content.

구현:

1. 상위 div의 위치를 ​​"상대"로 설정합니다.
2. 배경에 대한 하위 요소를 만들고 설정합니다. 위치를 "절대"로 설정하고 위쪽, 오른쪽, 아래쪽 및 왼쪽 값을 0으로 설정하거나 높이와 너비를 100%).
3. 배경 하위 요소에 흐림 또는 불투명도 속성을 적용합니다.

이런 방식으로 배경을 분리하면 콘텐츠 하위 요소가 흐림의 영향을 받지 않습니다. 또는 상위 요소에 불투명도 적용 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 {
  /* Content properties here */
}

<div>

위 내용은 하위 요소를 흐리게 하지 않고 Div의 배경을 흐리게 하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!