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

콘텐츠에 영향을 주지 않고 배경 이미지 흐림 효과 만들기

이 예의 목표는 콘텐츠의 선명도를 손상시키지 않고 배경 이미지를 흐리게 하는 것입니다. 콘텐츠(이 경우에는 스팬 요소).

문제

CSS를 사용하여 배경 이미지에 흐림 효과를 적용하면 요소 내의 콘텐츠도 흐려집니다. . 이로 인해 텍스트나 기타 콘텐츠의 가독성을 유지하는 데 어려움이 있습니다.

해결책

원하는 효과를 얻으려면 CSS 의사 클래스를 활용할 수 있습니다. :before 의사 클래스는 이 시나리오에 적합합니다. 방법은 다음과 같습니다.

1. 특정 클래스(예: "blur-bgimage") 내에서 콘텐츠를 래핑합니다.

<code class="html"><div class="blur-bgimage">
  <span>Main Content</span>
</div></code>

2. 스타일 지정: 배경 이미지를 모방하고 흐림 효과를 적용하기 위한 클래스 내의 before 의사 요소:

<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>

3. :before 의사 요소는 콘텐츠를 오버레이하고 배경 이미지를 상속하고 흐림 효과를 적용합니다. . 음수 Z-인덱스는 콘텐츠 뒤에 배치됩니다.
4. blur-bgimage 클래스를 상위 컨테이너에 추가하면 흐림 효과가 트리거되고 이를 제거하면 원래 선명도가 복원됩니다.

이것은 이 방법은 요소 내 콘텐츠의 선명도를 유지하면서 배경 이미지를 효과적으로 흐리게 합니다.

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