CSS로 젖빛 유리 효과를 얻는 방법에 대한 간략한 토론

이 기사에서는 CSS를 사용하여 젖빛 유리 효과를 얻는 방법을 알려줄 것입니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

Apple 공식 웹사이트에서 플로팅 메뉴의 반투명 유리 효과를 봤습니다

이 효과에 매료되었습니다. 소스 코드를 파헤쳐보니 이 효과는 단 두 개의 CSS를 통해서만 얻을 수 있습니다. 속성.

Apple 웹사이트 주소 https://www.apple.com.cn/macos/big-sur/. 관심이 있으시면 확인해 보세요. 더 흥미로운 특수 효과가 있습니다. Apple의 페이지 경험은 실제입니다. 관심이 있으면 공부할 수 있습니다.

주요 CSS 속성

background: rgba(29,29,31,0.72);

투명도가 0.72인 배경색 추가

backdrop-filter: saturate(180%) blur(20px);

backdrop-filter 요소가 아닌 요소 뒤에 필터를 추가합니다. 여기에 두 개의 필터가 있습니다saturate和blur

추가 프로그래밍 관련 지식 , 방문해주세요: 프로그래밍 비디오! !

위 내용은 CSS로 젖빛 유리 효과를 얻는 방법에 대한 간략한 토론의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!