목차
- backdrop-filter 예제 - 배경 필터 효과 (예: 배경 흐릿하게)
- backdrop-filter 정의
- backdrop-filter 구문
backdrop-filter 예제 - 배경 필터 효과 (예: 배경 흐릿하게)
<link href="https://fonts.googleapis.com/css?family=Exo+2" rel="stylesheet">
<style>
* {
box-sizing: border-box;
}
html,
body {
font-family: "Exo 2", sans-serif;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.container {
position: relative;
width: 100%;
height: 100%;
border: 1px solid red;
}
.feature {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.inner {
background: url("https://source.unsplash.com/G_qgKCE9fE0/800x600");
background-repeat: none;
width:750px ;
height: 600px;
}
.menu {
top: 0;
right: 0;
height: 100%;
width: 50%;
padding: 5rem;
background: rgba(243, 244, 245, 0.5);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
</style>
<div class="container">
<div class="feature">
<div class="inner">
<div class="menu">
<p>Glass effect</p>
</div>
</div>
</div>
</div>
결과보기
backdrop-filter 정의
요소 뒤에 흐릿하게 흐림 효과 주거나, 다양한 색상 필터링 효과 줄 때 사용.
1.
배경을 최소한 반투명하게는 해야 효과 확인 가능.
(예) background:rgba(255, 255, 255, 0.5)
2.
- 기본값: none
- 상속여부: X
- 애니효과: O
- CSS버전: CSS3
3.
IE, 파이어폭스 제외한 주요 최신 브라우저 지원.
4. MDN filter 예제 보기
https://developer.mozilla.org/ko/docs/Web/CSS/filter
5. MDN backdrop-filter 예제 보기
https://developer.mozilla.org/ko/docs/Web/CSS/backdrop-filter
backdrop-filter 구문
selector {backdrop-filter:속성값}
※ 다중 필터 (= 속성값 여러 개 나열) 가능.
[속성값]
none
비적용. (기본값)
url(commonfilters.svg#filter);
SVG 필터 URL
blur(2px);
흐림 효과. (숫자 커질수록 더 흐릿해짐.)
brightness(60%);
명도 효과.
contrast(40%);
대비 효과.
drop-shadow(4px 4px 10px blue);
그림자 효과.
grayscale(30%);
흑백 효과.
hue-rotate(120deg);
색조 회전 효과.
invert(70%);
색 반전 효과.
opacity(20%);
불투명도 효과.
sepia(90%);
갈색톤 효과.
saturate(80%);
채도 효과.
initial
이 속성의 기본값으로 지정.
inherit
부모 요소의 속성값 상속.
unset
상속값 존재하면 상속값을, 그렇지 않으면 초기값 사용. 자세히보기.
PS. 다중 필터 가능 ★
- backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);
- backdrop-filter: blur(5px) brightness(.6) grayscale(100%);
