배경 이미지에만 흐림효과(Blur) 적용하기
배경 이미지에만 blur 효과를 적용하는 방법이다.
(IE에서는 적용이 안되고, 크롬에서는 정상 작동한다.)
주의할 점은 style로 Background를 준 엘리먼트 또는 그 자식 엘리먼트 이여야 한다.
해당 개체의 z-index가 1 이상 이어야한다.
blur 효과 적용 방법
1.HTML 코드에 적용할 Element의 bgBlur class를 추가 해준다.
이때 흐림효과를 적용할 Element는 반드시 style로 background 이미지가 있어야 한다.
1
2
3
4
5
6
7
8
| <div id="blurExample" class="bgBlur">
<h1>내용물은 흐려지지 않습니다.</h1>
</div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="blur">
<feGaussianBlur stdDeviation="6" />
</filter>
</svg>
|
2.style.css에 아래 코드를 추가한다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
| #blurExample {
overflow:hidden;
float:left;
position: relative;
z-index: 1;
width: 200px;
height: 250px;
margin: 10px;
background: url({@이미지파일경로}) 50% 50%;
background-size: cover;
}
.bgBlur:before {
content: '';
position: absolute;
top: 0;
left:0;
right:0;
bottom:0;
z-index:-1;
background: inherit;
filter: blur(6px);
-webkit-filter: blur(6px);
-moz-filter: blur(6px);
-o-filter: blur(6px);
-ms-filter: blur(6px);
filter:url(#blur);
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='6');
}
svg {
height:0
}
|
참조