[background] CSS - backdrop-filter 속성 - 배경 필터 효과. (= 흐림효과 = 유리효과 = backdrop-filter속성 = 백드랍필터속성 = 백드롭필터속성)

1. backdrop-filter 예제 - 배경 필터 효과 (예: 배경 흐릿하게)
2. backdrop-filter 정의
3. 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%);