콘텐츠에 영향을 주지 않고 배경 이미지 흐림 효과 만들기
이 예의 목표는 콘텐츠의 선명도를 손상시키지 않고 배경 이미지를 흐리게 하는 것입니다. 콘텐츠(이 경우에는 스팬 요소).
문제
CSS를 사용하여 배경 이미지에 흐림 효과를 적용하면 요소 내의 콘텐츠도 흐려집니다. . 이로 인해 텍스트나 기타 콘텐츠의 가독성을 유지하는 데 어려움이 있습니다.
해결책
원하는 효과를 얻으려면 CSS 의사 클래스를 활용할 수 있습니다. :before 의사 클래스는 이 시나리오에 적합합니다. 방법은 다음과 같습니다.
<code class="html"><div class="blur-bgimage"> <span>Main Content</span> </div></code>
<code class="css">.blur-bgimage:before { content: ""; position: absolute; width: 100%; height: 100%; background-image: inherit; z-index: -1; filter: blur(10px); // Adjust the blur radius as desired transition: all 2s linear; }</code>
이것은 이 방법은 요소 내 콘텐츠의 선명도를 유지하면서 배경 이미지를 효과적으로 흐리게 합니다.
위 내용은 콘텐츠 선명도에 영향을 주지 않고 배경 이미지를 흐리게 하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!