filter : 이미지 필터 적용하기
html)
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 34 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, height=device-height, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0"> <title>Insert title here</title> <style> img { width: 200px; height: 200px; /* filter : 이미지에 필터효과를 적용한다 blur(px) : 이미지를 흐리게 한다 brightness(%) : 이미지의 밝기를 변경한다 contrast(%) : 이미지의 대비를 변경한다 drop-shadow(x-offset y-offset blur color) : 이미지에 그림자를 추가한다 grayscale(%) : 이미지에 흑백효과를 적용한다 hue-rotate(deg) : 이미지에 색상환의 각도를 지정 invert(%) : 이미지 반전 opacity(%) : 이미지에 투명도 적용 */ -webkit-filter: blur(5px); filter: blur(5px); } </style> </head> <body> <img src="images/testimage.jpg" /> </body> </html> | cs |
결과
이미지에 흐린 효과를 적용한다
'IT > - 프로그래밍' 카테고리의 다른 글
| HTML5/CSS3 checkbox : 다중선택 예제 (0) | 2017.06.27 |
|---|---|
| HTML5/CSS3 form 속성 (0) | 2017.06.26 |
| HTML5/CSS3 transform : skew - 요소 기울이기 (0) | 2017.06.24 |
| HTML5/CSS3 transform : rotate - 요소 회전하기 (0) | 2017.06.23 |
| HTML5/CSS3 transform : scale - 요소 크기변경 (0) | 2017.06.22 |