오버레이 자체를 흐리게 하지 않고 CSS 오버레이에서 흐린 배경 효과를 얻는 방법은 무엇입니까?

CSS 오버레이에서 유리 효과 달성: 흐림 문제 해결

문제: 오버레이 div에 흐림 효과 적용 오버레이 뒤의 내용을 흐리게 하지 않고 남겨두는 것은 어려운 일입니다. 간단한 크로스 브라우저 솔루션을 찾고 있습니다.

해결책:

jsfiddle에 제공된 예는 CSS 오버레이의 흐림 효과와 관련된 일반적인 문제를 보여줍니다. 즉, 오버레이를 흐리게 만듭니다. 배경이 아닌 그 자체입니다. 이 문제를 해결하려면 backdrop-filter 속성을 ​​활용하는 것이 좋습니다.

업데이트된 CSS:

#overlay {
    ... (previous CSS) ...

    backdrop-filter: blur(6px);
}

장점:

• 더보기 정확함: 오버레이 대신 배경을 흐리게 하여 원하는 효과를 얻습니다.
• 크로스 브라우저 호환성: Chrome, Firefox, Edge를 포함한 주요 브라우저에서 지원됩니다.
• 단순화된 코드: 여러 필터 속성이 필요하지 않아 더 깔끔하고 유지 관리가 용이한 필터를 제공합니다.

참고:

배경 필터에 대한 브라우저 지원은 특히 이전 버전에서는 완벽하지 않을 수 있습니다. 그러나 이전에 구현된 CSS 필터에 비해 상당한 개선을 제공하며 일반적으로 흐림 효과가 필수적이지 않은 대부분의 사용 사례에 충분합니다.

위 내용은 오버레이 자체를 흐리게 하지 않고 CSS 오버레이에서 흐린 배경 효과를 얻는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!