콘텐츠 선명도를 유지하면서 배경 이미지에 CSS 흐림

CSS 설정에서 배경 이미지를 흐리게 하려고 할 때 일반적으로 발생하는 문제는 다음과 같습니다. 콘텐츠(텍스트 또는 기타 요소)도 흐려지는 문제. 여기에서 Z-인덱스와 의사 요소의 개념이 작용합니다.

내용에 영향을 주지 않고 배경 이미지를 흐리게 하려면 다음 접근 방식을 사용할 수 있습니다.

1. 배경을 위한 컨테이너 생성: div 또는 다른 컨테이너 내에 배경 이미지를 포함하고 "blur-bgimage"와 같은 클래스를 할당합니다.
2. 의사 요소 소개: "blur-bgimage" 클래스 내에 :before와 같은 의사 클래스를 추가합니다. 그러면 배경 이미지를 상속하는 컨테이너 뒤에 레이어가 생성됩니다.
3. 배경 흐리게: CSS 필터를 사용하여 의사 요소에 흐림 효과를 적용합니다. 이렇게 하면 콘텐츠에 영향을 주지 않고 상속된 배경 이미지가 흐려집니다.
4. 콘텐츠 오버레이: 콘텐츠를 "blur-bgimage" 컨테이너 내에 배치하여 더 높은 Z-색인(예: , z-index: 1)보다 흐린 배경(z-index: 0).

아래는 예제 코드입니다:

.blur-bgimage {
    overflow: hidden;
    margin: 0;
    text-align: left;
}
.blur-bgimage:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: inherit;
    z-index: -1;

    filter: blur(10px);
    -moz-filter: blur(10px);
    -webkit-filter: blur(10px);
    -o-filter: blur(10px);

    transition: all 2s linear;
    -moz-transition: all 2s linear;
    -webkit-transition: all 2s linear;
    -o-transition: all 2s linear;
}

이 접근 방식을 구현하면 콘텐츠의 선명도를 유지하면서 배경 이미지를 효과적으로 흐리게 할 수 있어 시각적으로 매력적인 웹사이트 디자인이 가능해집니다.