contrast()

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.

contrast()CSS関数で、入力画像のコントラストを調整します。結果は <filter-function> です。

試してみましょう

構文

css
contrast(amount)

引数

amount

結果のコントラストで、 <number> または <percentage> で指定します。 100% 未満の値ではコントラストが下がり、 100% を超える値ではコントラストが上がります。 0 または 0% の値では画像が完全に灰色になり、 1 または 100% の値では入力が変更されないままになります。補間の初期値は 1 です。

以下は、等価な値のペアです。

css
contrast(0) /* 完全な灰色 */
contrast(0%)

contrast(0.65) /* 65% のコントラスト */
contrast(65%)

contrast(1)     /* 効果なし */
contrast(100%)

contrast(2)  /* 2 倍のコントラスト */
contrast(200%)

形式文法

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

backdrop-filter プロパティで

この例では、 contrast() フィルターを backdrop-filter プロパティで段落と東福テキストに適用しており、 <p><code> の背後の領域で色が変化しています。

css
.container {
  background: url(image.jpg) no-repeat center / contain #339;
}
p {
  backdrop-filter: contrast(0.5);
}
code {
  backdrop-filter: contrast(0.15);
}

filter プロパティで

この例では、 contrast() フィルターを CSS の filter プロパティを使用して適用し、コンテンツ、境界線、背景、影を含む要素全体の色をシフトさせることでコントラストを変更しています。

css
p:first-of-type {
  filter: contrast(30%);
}
p:last-of-type {
  filter: contrast(300%);
}

url() と SVG の contrast フィルター

SVG の <filter> 要素を使用して、カスタムフィルター効果を定義し、それを id で参照することができます。 <filter><feComponentTransfer> プリミティブは、ピクセルレベルでの色変換を可能にします。 次のものが指定されたとします。

svg
  <filter id="contrast">
    <feComponentTransfer>
      <feFuncR type="linear" slope="2" intercept="-0.5"/>
      <feFuncG type="linear" slope="2" intercept="-0.5"/>
      <feFuncB type="linear" slope="2" intercept="-0.5"/>
    </feComponentTransfer>
  </filter>

これらの値は同じ結果を生み出します。

css
filter: contrast(200%);
filter: url(#contrast); /* 埋め込み SVG による */
filter: url(folder/fileName.svg#contrast); /* 外部 SVG フィルター定義 */

この例では、 3 つの画像を表示させています。 1 つ目は、 contrast() フィルター関数を適用した画像、 2 つ目は、等価な url() フィルターを適用した画像、そして比較用に元の画像です。

仕様書

Specification
Filter Effects Module Level 1
# funcdef-filter-contrast

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
contrast()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報