메뉴에 투명 블러 유리 효과 이런 것도 CSS로 가능한가요?
본문
홈페이지 취미?로 하는 사람이니 감안해주세요;
소스 보니 이미지로 한 것이 아닌 것 같네요....
CSS로 구현 가능할까요?
스크립트 찾아보니 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>
답변을 작성하시기 전에 로그인 해주세요.