<filter-function>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.

CSS <filter-function> 자료형은 입력 이미지의 모습을 변형할 수 있는 그래픽 효과를 나타냅니다. filter와 backdrop-filter 속성에서 사용합니다.

구문

<filter-function> 자료형은 다음 목록의 필터 중 하나를 사용해 지정할 수 있습니다. 각 함수는 매개변수를 받아야 하며, 유효하지 않은 값을 전달하면 필터를 적용하지 않습니다.

blur()

이미지를 흐리게 만듭니다.

brightness()

이미지의 밝기를 조절합니다.

contrast()

이미지의 대비를 조절합니다.

drop-shadow()

이미지의 뒤에 그림자를 적용합니다.

grayscale()

이미지를 흑백으로 변환합니다.

hue-rotate()

이미지의 전체 색조를 조절합니다.

invert()

이미지의 색을 반전합니다.

opacity()

이미지의 투명도를 조절합니다.

saturate()

이미지의 채도를 조절합니다.

sepia()

이미지에 세피아 톤을 적용합니다.

예제

필터 함수 비교

이 예제는 간단한 그래픽과 함께 여러 가지 필터를 선택할 수 있는 선택 메뉴와, 필터의 값을 조절할 수 있는 슬라이더를 제공합니다. 컨트롤을 조절하면 필터가 실시간으로 변화하므로 각 필터의 효과를 편리하게 알아볼 수 있습니다.

HTML

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

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

js
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

같이 보기