CSS만 사용하여 하위 요소에 영향을 주지 않고 상위 Div의 배경을 흐리게 하는 방법은 무엇입니까?

하위 요소에 영향을 주지 않고 상위 Div를 흐리게 하는 방법(CSS 전용 솔루션)

흐림이나 불투명도와 같은 CSS 필터를 상위 div, 그 안에 있는 하위 요소도 영향을 받을 수 있습니다. 절대 위치 지정을 사용하지 않고 이 문제를 해결하려면 다음 해결 방법을 고려하십시오.

배경과 콘텐츠에 대해 별도의 Div 생성:

1. 상위 div 내에 두 개의 div 생성 : 하나는 배경 이미지용이고 다른 하나는 콘텐츠용입니다.
2. 위치 지정: 상위 이미지에 상대적 div.

위치 배경 Div 절대:

1. 위치 할당: 절대; 상단: 0; 오른쪽: 0; 하단: 0; 왼쪽: 0;
2. 이렇게 하면 배경 div가 전체 상위 div를 덮게 됩니다.

배경 Div에 흐림 효과 추가:

1. 배경 div에 필터: Blur() 속성을 적용합니다.
2. z-index를 음수 값(예: -1)으로 설정하여 콘텐츠 div 뒤에 배치합니다.

예:

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

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

<div>

이 방법을 사용하면 콘텐츠가 포함된 하위 div에 영향을 주지 않고 배경 이미지를 흐리게 할 수 있습니다.

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