콘텐츠 선명도에 영향을 주지 않고 배경 이미지를 흐리게 하는 방법은 무엇입니까?

콘텐츠에 영향을 주지 않고 배경 이미지를 흐리게

시각적으로 매력적인 디자인을 만들기 위해 개발자는 배경 이미지를 흐리게 할 때 종종 어려움에 직면합니다. 웹 페이지의. 그러나 이미지를 흐리게 하면 주요 콘텐츠(텍스트 및 요소)에도 영향을 미치는 경우가 많습니다. 이는 콘텐츠의 선명도를 유지하면서 어떻게 배경 이미지를 흐리게 할 수 있는지에 대한 질문을 제기합니다.

해결책은 CSS와 JavaScript를 활용하여 콘텐츠 레이어를 뚜렷하게 유지하면서 흐린 배경을 위한 별도의 레이어를 만드는 것입니다. 전체 코드 조각은 다음과 같습니다.

.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;
}

이 코드 조각은 배경 이미지를 상속하는 의사 요소(:before)를 생성합니다. 이 의사 요소를 절대적으로 배치함으로써 흐린 배경을 위한 별도의 레이어를 만듭니다. 필터 속성을 사용하여 흐림 효과를 적용합니다.

배경을 흐리게 하려면 원하는 요소에 "blur-bgimage" 클래스를 추가하기만 하면 됩니다. 흐림을 제거하려면 클래스를 제거하십시오. JavaScript를 사용하면 클래스를 동적으로 추가 및 제거할 수 있으므로 흐림 효과를 동적으로 제어할 수 있습니다.

이 기술을 구현하면 웹사이트 콘텐츠의 선명도를 유지하면서 흐린 배경 이미지로 시각적으로 멋진 디자인을 만들 수 있습니다. .

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