이미지와 같은 그래픽 대상에 효과를 줄 수 있는 기능인
filter에 대해 알아보자
원본은 그대로 두고,
코드를 통해 뷰를 제어하는 것이filter의 특징이다
filter는 비교적 최신 기술이기에, 브라우저 마다 실행여부가 다를 수 있기에
-webkit-filter 크롬,사파리 , -o-filter 라는 속성도 추가시켜준다
<!DOCTYPE html>
<html>
<head>
<style>
img {
-webkit-filter : grayscale(0%);
-o-filter : grayscale(0%);
filter : grayscale(0%);
}
</style>
</head>
<body>
<h1>필터</h1>
<img src="sample.jpg" alt="" >
</body>
</html>더 자세한 내용은 CSS filter demo에서 확인할 수 있다
즐기면서 정확하게 나아가는 웹프론트엔드 개발자 https://happhee-dev.tistory.com/ 로 이전하였습니다