filter 속성은 흐림 효과나 색상 변형 등 그래픽 효과를 요소에 적용합니다.
보통 필터는 이미지, 배경, 테투리 렌더링을 조정 하는 데 사용됩니다.
(+ 중첩으로 효과를 부여 할 수도 있습니다.)
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
filter: blur(1px);
}
img {
filter: grayscale(100%) blur(5px);
}
img:hover {
filter: blur(5px);
}
</style>
</head>
<body>
<h1>Mountain</h1>
<img
src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbd8q3Z%2FbtrsiGBVkWX%2FlkXxH2ux9BNccNXgYYi7W0%2Fimg.jpg"
/>
</body>
</html>'프레임워크 > CSS' 카테고리의 다른 글
| [생활코딩] transform (0) | 2022.02.05 |
|---|---|
| [생활코딩] blend (0) | 2022.02.05 |
| [생활코딩] background (0) | 2022.02.05 |
| [생활코딩] float (1) | 2022.02.04 |
| [생활코딩] Media Query (0) | 2022.02.04 |
댓글