CSS 배경 필터 효과

991 단어 filterwebdevhtmlcss
어제 나는 한 사이트에서 매우 멋진 효과를 보았고, 내가 개발하고 있는 새로운 인터넷 응용 프로그램에 이 효과를 재현하려고 시도했다.투명한 용기를 가지고 있으며, 그 뒤에 있는 배경 이미지에 필터 배경을 만들어서 매우 깔끔합니다.
효과는 다음과 같습니다.

나는 흔히 볼 수 있는 css 속성 필터:blur(10px)를 시도했지만, 이것은 원소 뒤의 배경이 아니라 용기 자체를 모호하게 했다.몇몇 연구를 통해 나는 매우 간단한 단행 css 속성을 발견하여 이 점을 실현하였다.그 이후로, 나는 내가 만든 모든 응용 프로그램이나 디자인에서 그것을 사용해 왔다. (적당한 상황에서)
이것은 다음과 같습니다.
.container {
    backdrop-filter: blur(10px);
}
CSS 속성이 있는지 몰랐습니다!
이제 용기 뒤에 배경 그림을 추가해서 마술을 보십시오.멋있죠?
참고 일부 브라우저에서는 이 속성을 지원하지 않을 수 있습니다.그러나 크롬, Firefox, 엣지 같은 주요 브라우저는 모두 있다.
해봐, 네 생각을 알게 해줘.다음까지!

좋은 웹페이지 즐겨찾기