CSS sepia() 関数

試してみましょう

filter: sepia(0);

filter: sepia(0.2);

filter: sepia(60%);

filter: sepia(1);

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

構文

sepia(amount)

引数

amount 省略可

変換の度合いで、 <number> または <percentage> で指定します。 100% の値では完全にセピア色になり、 0% の値では入力が変更されないままになります。 0% と 100% の間の値は、効果の割合です。補間の初期値は 0 です。デフォルト値は 1 です。

形式文法

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

例

sepia() の正しい値の例

sepia(0)     /* 効果なし */
sepia(.65)   /* 65% セピア色 */

sepia()      /* 完全にセピア色 */
sepia(100%)

仕様書

ブラウザーの互換性

関連情報

その他の filter および backdrop-filter プロパティの値で使用できる <filter-function> 関数には、次のものがあります。

• blur()
• brightness()
• contrast()
• drop-shadow()
• grayscale()
• hue-rotate()
• invert()
• opacity()
• saturate()