<filter-function>
CSS <filter-function>
자료형은 입력 이미지의 모습을 변형할 수 있는 그래픽 효과를 나타냅니다. filter
와 backdrop-filter
속성에서 사용합니다.
구문
<filter-function>
자료형은 다음 목록의 필터 중 하나를 사용해 지정할 수 있습니다. 각 함수는 매개변수를 받아야 하며, 유효하지 않은 값을 전달하면 필터를 적용하지 않습니다.
blur()
-
이미지를 흐리게 만듭니다.
brightness()
-
이미지의 밝기를 조절합니다.
contrast()
-
이미지의 대비를 조절합니다.
drop-shadow()
(en-US)-
이미지의 뒤에 그림자를 적용합니다.
grayscale()
(en-US)-
이미지를 흑백으로 변환합니다.
hue-rotate()
(en-US)-
이미지의 전체 색조를 조절합니다.
invert()
(en-US)-
이미지의 색을 반전합니다.
opacity()
(en-US)-
이미지의 투명도를 조절합니다.
saturate()
(en-US)-
이미지의 채도를 조절합니다.
sepia()
(en-US)-
이미지에 세피아 톤을 적용합니다.
예제
필터 함수 비교
이 예제는 간단한 그래픽과 함께 여러 가지 필터를 선택할 수 있는 선택 메뉴와, 필터의 값을 조절할 수 있는 슬라이더를 제공합니다. 컨트롤을 조절하면 필터가 실시간으로 변화하므로 각 필터의 효과를 편리하게 알아볼 수 있습니다.
HTML
<div></div>
<ul>
<li>
<label for="filter-select">필터 함수 선택:</label>
<select id="filter-select">
<option selected>blur</option>
<option>brightness</option>
<option>contrast</option>
<option>drop-shadow</option>
<option>grayscale</option>
<option>hue-rotate</option>
<option>invert</option>
<option>opacity</option>
<option>saturate</option>
<option>sepia</option>
</select>
</li>
<li>
<input type="range"><output></output>
</li>
<li>
<p>Current value: <code></code></p>
</li>
</ul>
CSS
div {
width: 300px;
height: 300px;
background: url(https://mdn.dev/archives/media/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png) no-repeat center;
}
li {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
input {
width: 60%
}
output {
width: 5%;
text-align: center;
}
select {
width: 40%;
margin-left: 2px;
}
JavaScript
const selectElem = document.querySelector('select');
const divElem = document.querySelector('div');
const slider = document.querySelector('input');
const output = document.querySelector('output');
const curValue = document.querySelector('p code');
selectElem.addEventListener('change', () => {
setSlider(selectElem.value);
setDiv(selectElem.value);
});
slider.addEventListener('input', () => {
setDiv(selectElem.value);
});
function setSlider(filter) {
if(filter === 'blur') {
slider.value = 0;
slider.min = 0;
slider.max = 30;
slider.step = 1;
slider.setAttribute('data-unit', 'px');
} else if(filter === 'brightness' || filter === 'contrast' || filter === 'saturate') {
slider.value = 1;
slider.min = 0;
slider.max = 4;
slider.step = 0.05;
slider.setAttribute('data-unit', '');
} else if(filter === 'drop-shadow') {
slider.value = 0;
slider.min = -20;
slider.max = 40;
slider.step = 1;
slider.setAttribute('data-unit', 'px');
} else if(filter === 'opacity') {
slider.value = 1;
slider.min = 0;
slider.max = 1;
slider.step = 0.01;
slider.setAttribute('data-unit', '');
} else if(filter === 'grayscale' || filter === 'invert' || filter === 'sepia') {
slider.value = 0;
slider.min = 0;
slider.max = 1;
slider.step = 0.01;
slider.setAttribute('data-unit', '');
} else if(filter === 'hue-rotate') {
slider.value = 0;
slider.min = 0;
slider.max = 360;
slider.step = 1;
slider.setAttribute('data-unit', 'deg');
}
}
function setDiv(filter) {
if(filter === 'drop-shadow') {
divElem.style.filter = `${selectElem.value}(${Math.round(slider.value)}${slider.getAttribute('data-unit')} ${Math.round(slider.value)}${slider.getAttribute('data-unit')} ${Math.round(Math.abs(slider.value/2))}${slider.getAttribute('data-unit')})`;
} else {
divElem.style.filter = `${selectElem.value}(${slider.value}${slider.getAttribute('data-unit')}`;
}
updateOutput();
updateCurValue();
}
function updateOutput() {
output.textContent = slider.value;
}
function updateCurValue() {
curValue.textContent = `필터: ${divElem.style.filter}`;
}
setSlider(selectElem.value);
setDiv(selectElem.value);
결과
명세서
Specification |
---|
Filter Effects Module Level 1 # typedef-filter-function |
같이 보기
- 자료형을 사용하는 속성:
filter
,backdrop-filter