[속성] filter 속성
학습일 : 2022. 09. 07
filter 속성
색상과 관련된 효과(카메라에 있는 그것)를 위해 사용한다.
함수를 이용하며 함수 이용시 공백( )으로 여러개의 함수를 이용할 수 있다. (절대 filter 속성을 여러개 사용하지 않는다.)
함수
blur([?px|?rem|...]) : 해당 요소의 내용을 주어진 길이 만큼 흐린다.
brightness([0.0~|0%~]) : 해당 요소의 밝기를 조절한다. 기본 값은 1(혹은 100%)이며 값이 작아지면 어두워지고,
커지면 밝아진다.
contrast([0.0~|0%~]) : 해당 요소의 대비를 조절한다. 기본 값은 1(혹은 100%)이다.
drop-shadow([X축 오프셋 : ?px|?rem|...] [Y축 오프셋 : ?px|?rem|...] [퍼짐 정도 : ?px|?rem|...] [색상])
: 해당 요소의 투명한 부분과 그렇지 않은 부분의 경계에 대해 그림자를 생성한다.
grayscale([0.0~1.0|0%~100%]) : 해당 요소의 회색조를 조절한다.
기본 값은 0(혹은 0%)이며 값이 커지면 채도가 빠져 흑백 사진이 된다.
invert([0|1|0%|100%]) : 해당 요소를 반전시킨다. 기본 값은 0(혹은 0%)이며 값이 커지면 색이 반전된다.
중간 값을 사용하지 않는다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>filter 속성</title>
<style>
.image {
filter: blur(0.5rem) brightness(50%);❤
}
.image:hover {
filter: invert(100%);❤
}
</style>
</head>
<body>
<img class="image" src="resources/images/t.png">❤
</body>
</html>===========실행결과============
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>filter 속성</title>
<style>
.image {
filter: contrast(300%);❤
}
.image:hover {
filter: invert(100%);❤
}
</style>
</head>
<body>
<img class="image" src="resources/images/t.png">
</body>
</html>==============실행결과=============
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>filter 속성</title>
<style>
.image {
filter: drop-shadow(-1rem 1rem 1rem rgb(0, 0, 0));❤
}
.image:hover {
filter: invert(100%);❤
}
</style>
</head>
<body>
<img class="image" src="resources/images/t.png">
</body>
</html>===========실행결과===============
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>filter 속성</title>
<style>
.image {
filter: grayscale(100%);❤
}
.image:hover {
filter: invert(100%);❤
}
</style>
</head>
<body>
<img class="image" src="resources/images/t.png">
</body>
</html>============실행결과===========