메뉴에 투명 블러 유리 효과 이런 것도 CSS로 가능한가요?

메뉴에 투명 블러 유리 효과 이런 것도 CSS로 가능한가요?

QA

메뉴에 투명 블러 유리 효과 이런 것도 CSS로 가능한가요?

본문

홈페이지 취미?로 하는 사람이니 감안해주세요;

소스 보니 이미지로 한 것이 아닌 것 같네요.... 

CSS로 구현 가능할까요?

 

https://ozez.co.kr/

 

스크립트 찾아보니 CSS파일이 이런 식으로 시작하긴합니다..

 

div.jGrowl{z-index:9999;color:#fff;font-size:12px}div.ie6{position:absolute}div.ie6.top-right{right:auto;bottom:auto;left:expression( ( 0 - jGrowl.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );top:expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' )}div.ie6.top-left{left:expression( ( 0 + ( ignoreMe2 = 

이 질문에 댓글 쓰기 :

답변 1

CSS backdrop-filter property 로 가능합니다.


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
        html, body {
            width: 100%;
            height: 100%;
        }
        .bg {
            width: 100%;
            height: 100%;
            background-image: url(https://ozez.co.kr/web/upload/appfiles/0zdpAngaKBFnlCcCqpCU4A/1d7021dd904c8ad592a9c73466a1d8c2.jpg);
            position: relative;
        }
        .bg nav {
            position: absolute;
            left: 280px;
            top: 180px;
            width: 20em;
            color: floralwhite;
            backdrop-filter: blur(1em);
        }
        </style>
    </head>
    <body>
    <div class="bg">
        <nav>
            <ul>
                <li>menu-1</li>
                <li>menu-2</li>
                <li>menu-3</li>
            </ul>
        </nav>
    </div>
    </body>
</html>
답변을 작성하시기 전에 로그인 해주세요.
전체 2,086
QA 내용 검색
filter #css ×

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT