전경 내용에 영향을 주지 않고 CSS에서 배경 이미지를 어떻게 흐리게 할 수 있나요?

CSS로 배경 흐리게 처리: 콘텐츠 흐림 방지

배경이 흐릿하면 웹사이트의 미관이 향상되고 핵심 콘텐츠에 주의가 집중될 수 있습니다. 하지만 흐림이 의도치 않게 콘텐츠 자체에 영향을 미치면 어떻게 될까요?

이 예에서는 범위 요소 내 전경 텍스트의 선명도를 유지하면서 배경 이미지를 흐리게 하려고 시도했습니다. 이를 달성하기 위해 CSS를 전략적으로 사용할 수 있습니다.

핵심 기술은 :before 가상 클래스를 활용하여 배경 이미지를 상속하는 것입니다. "blur-bgimage" 클래스가 있는 새로운 div 요소가 도입되고 :before 의사 클래스가 추가됩니다. 이 의사 요소는 background: 상속 속성을 사용하여 배경 이미지를 상속합니다.

다음으로 :before 의사 요소는 CSS 필터를 사용하여 효과적으로 흐리게 처리됩니다. 이러한 필터(이 경우 흐림(10px))를 통합하면 배경 이미지에 원하는 흐림 효과가 부여됩니다.

그런 다음 ".blur-bgimage" div에 오버플로가 할당됩니다: 숨겨진 영역 너머로 흐린 영역을 숨깁니다. div의 경계. 여백, 텍스트 정렬 및 Z-인덱스도 적절하게 설정됩니다.

흐림 효과를 전환하려면 제공된 jsfiddle 예제에 설명된 대로 JavaScript를 사용하여 ".blur-bgimage" 클래스를 추가하거나 제거할 수 있습니다. . 이 방법을 사용하면 콘텐츠의 선명도를 손상시키지 않으면서 배경 흐림 효과를 동적으로 제어할 수 있습니다.

위 내용은 전경 내용에 영향을 주지 않고 CSS에서 배경 이미지를 어떻게 흐리게 할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!