<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.

<filter-function> は CSS のデータ型で、入力された画像の表示方法を変更することができるグラフィカル効果を表します。これは filter および backdrop-filter プロパティで使用します。

構文

<filter-function> データ型は以下の一覧にあるフィルター関数を使用して指定されます。それぞれの関数には引数が必要であり、無効な場合は、フィルターが適用されません。

blur()

画像をぼかします。

brightness()

画像を明るくしたり暗くしたりします。

contrast()

画像のコントラストを上げたり下げたりします。

drop-shadow()

画像の背後にドロップシャドウを適用します。

grayscale()

画像をグレイスケールに変換します。

hue-rotate()

画像の色相を全体的に変更します。

invert()

画像の色を反転させます。

opacity()

画像を半透明にします。

saturate()

入力画像の彩度を上げたり下げたりします。

sepia()

画像をセピア調に変換します。

形式文法

<filter-function> = 
  <blur()>         |
  <brightness()>   |
  <contrast()>     |
  <drop-shadow()>  |
  <grayscale()>    |
  <hue-rotate()>   |
  <invert()>       |
  <opacity()>      |
  <sepia()>        |
  <saturate()>     

<blur()> = 
  blur( <length>? )  

<brightness()> = 
  brightness( [ <number> | <percentage> ]? )  

<contrast()> = 
  contrast( [ <number> | <percentage> ]? )  

<drop-shadow()> = 
  drop-shadow( [ <color>? && <length>{2,3} ] )  

<grayscale()> = 
  grayscale( [ <number> | <percentage> ]? )  

<hue-rotate()> = 
  hue-rotate( [ <angle> | <zero> ]? )  

<invert()> = 
  invert( [ <number> | <percentage> ]? )  

<opacity()> = 
  opacity( [ <number> | <percentage> ]? )  

<sepia()> = 
  sepia( [ <number> | <percentage> ]? )  

<saturate()> = 
  saturate( [ <number> | <percentage> ]? )

例

フィルター関数の比較

この例では、シンプルなグラフィックに加えて、さまざまな種類のフィルター機能を選択するための選択メニューと、フィルター機能内で使用される値を変化させるためのスライダーが用意されています。コントロールを更新すると、フィルター効果がリアルタイムで更新されるので、さまざまなフィルターの効果を調べることができます。

css
div {
  width: 100%;
  height: 512px;
  background: url(fx-nightly-512.png);
  background-repeat: no-repeat;
  background-position: center center;
  filter: <filter-function>(<value>);
}

ここで、 <filter-function> はドロップダウンから選択したフィルターであり、 <value> はスライダーで設定した値です。

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>現在の値: <code></code></p>
  </li>
</ul>
css
div {
  width: 100%;
  height: 512px;
  background-image: url(https://mdn.github.io/shared-assets/images/examples/fx-nightly-512.png);
  background-repeat: no-repeat;
  background-position: center 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;
}

仕様書

Specification
Filter Effects Module Level 1
# typedef-filter-function

ブラウザーの互換性

BCD tables only load in the browser

関連情報