HTML DOM 스타일 필터 속성은 요소에 시각 효과를 정의하는 데 사용됩니다.
다음은 −
의 구문입니다.필터 속성 설정 -
object.style.filter = "none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia()"
위의 속성 값은 다음과 같이 설명됩니다 -
| 필터 | 설명 |
|---|---|
| 없음 | 효과를 지정하지 않습니다. |
| 흐림(px) | 흐림 효과를 적용합니다. |
| 밝기(%) | 이미지 밝기 조정. 100%(원본 이미지)에서 위까지 값을 가져옵니다. |
| 대비(%) | 이미지 대비 조정. 0%(완전히 검은색), 100%(원본 이미지) 범위의 값을 취하며 100% 이상에서는 대비가 덜 됩니다. |
| drop-shadow(h-shadowv-shadow 흐림 확산 색상) | 이미지에 그림자를 적용합니다. |
| 회색조(%) | 이미지를 회색조로 변환하기 위해 0%는 원본 이미지를 나타내고 100%는 완전히 회색으로 만듭니다. |
| 색조 회전(도) | 아파라미터가 지정된 각도로 이미지에 색조 회전을 적용합니다. 기본값은 원본 이미지를 나타내는 0도이며 최대 360도까지 올라갈 수 있습니다. |
| 반전(%) | 이미지의 샘플을 반전합니다. |
| 불투명도(%) | 0%(완전 투명)에서 100%(원본 이미지 및 기본값)까지 이미지의 불투명도 수준을 설정합니다. |
| 포화도(%) | 이미지를 포화시킵니다. |
| 세피아(%) | 이미지를 세피아로 변환합니다. |
필터 속성에 대한 예를 살펴보겠습니다 -
예시
<!DOCTYPE html>
<html>
<head>
<style>
#one {
filter: hue-rotate(90deg);
}
</style>
<script>
function changeFilter() {
document.getElementById("one").style.filter ="sepia(40%)";
document.getElementById("Sample").innerHTML="The grayscale filter is now applied to above image";
}
</script>
</head>
<body>
<img id="one" src="https://www.tutorialspoint.com/big_data_analytics/images/big-data-analytics- mini-logo.jpg">
<p>Change the above image filter property by clicking the below button</p>
<button onclick="changeFilter()">Change Filter</button>
<p id="Sample"></p>
</body>
</html> 출력
"필터 변경을 클릭하면 " 버튼 -
