콘텐츠를 선명하게 유지하면서 CSS에서 요소의 배경 이미지를 흐리게 하는 방법은 무엇입니까?

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

CSS에서 콘텐츠의 배경 이미지를 흐리게 하고 싶은 상황이 발생할 수 있습니다. 요소 내부의 콘텐츠에는 영향을 주지 않습니다. 이를 달성하는 방법은 다음과 같습니다.

해결책에는 상위 요소의 배경 이미지를 상속하는 의사 요소(:before)를 만드는 것이 포함됩니다. 그런 다음 이 의사 요소는 절대 위치에 배치되고 흐림 필터가 제공됩니다. Z-인덱스를 -1로 설정하면 콘텐츠 뒤에 표시됩니다.

이를 구현하려면 다음 CSS를 적용하세요.

<code class="css">.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;
}</code>

그런 다음 JavaScript를 사용하여 클래스( 예: 'blur-bgimage') 이 CSS를 원하는 요소에 적용하고 필요에 따라 배경 이미지를 흐리게 하거나 흐리게 해제합니다.

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