brightness()

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.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.

Please take two minutes to fill out our short survey.

brightness() は CSS の関数で、入力画像に線形乗算を適用し、明るくしたり暗くしたりします。その結果は <filter-function> です。

試してみましょう

filter: brightness(1);

filter: brightness(1.75);

filter: brightness(50%);

filter: brightness(0);

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

構文

css

brightness(amount)

引数

amount: 明るさで、 <number> または <percentage> で指定します。値が 100% 未満の場合は入力画像または要素が暗くなり、 100% を超える場合は明るくなります。値が 0% の場合は完全に黒い画像または要素が作成され、 100% の場合は入力が変更されません。 0% から 100% までの他の値は、線形の乗算効果があります。 100% を超える値も許可されており、明るい結果を提供します。補間の初期値は 1 です。負の値は許可されていません。何も指定しない場合の既定値は 1 です。

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

css

brightness(0) /* 輝度がゼロに縮小されるため、入力が黒くなる */
brightness(0%)

brightness(0.4) /* 入力の明るさが40%に縮小されるため、入力は60%暗くなる */
brightness(40%)

brightness(1) /* 入力の明るさは変更されない */
brightness(100%)

brightness(2) /* 入力の明るさが 2 倍に */
brightness(200%)

形式文法

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

例

backdrop-filter プロパティを用いた brightness の適用

この例は、段落に brightness() フィルターを、 backdrop-filter プロパティを介して適用する方法を示します。

CSS

css

.container {
  background: url(image.jpg) no-repeat right / contain #d4d5b2;
}
p {
  backdrop-filter: brightness(150%);
  text-shadow: 2px 2px #ffffff;
}

.container {
  padding: 5rem 3rem 1rem;
  width: 30rem;
}
p {
  padding: 0.5rem;
  color: #000000;
  font-size: 2rem;
  font-family: sans-serif;
}

<div class="container" style="background-image: url(be_fierce.jpg);">
  <p>
    画像上のテキストは、ドロップシャドウがあっても読みにくく、アクセシビリティに欠ける場合があります。
  </p>
</div>

結果

この例では、<p> 要素の背後の領域の色が直線的に変化します。 backdrop-filter プロパティが brightness(0%) に設定されていた場合、<p> 要素を含む <div> 領域は黒色となり、背後の画像を隠します。 brightness(100%) では、<div> 領域の色は入力の #d4d5b2 と同じになり、背景の画像は完全に透明になります。この例のように明るさを 150% に設定すると、背景の画像の色は <div> 要素の明るさによって隠されます。

数値とパーセント値を用いた brightness の設定

例えば、 brightness() フィルターが、 filter プロパティを介して、コンテンツ、境界線、背景画像を含め、要素全体に適用されます。その結果、異なる明るさの値の 3 つのバリエーションが表示されます。

css

p:first-of-type {
  filter: brightness(50%);
}
p:last-of-type {
  filter: brightness(200%);
}

p {
  text-shadow: 2px 2px blue;
  background-color: magenta;
  color: palegoldenrod;
  border: 1em solid rebeccapurple;
  box-shadow:
    inset -5px -5px red,
    5px 5px yellow;
  padding: 0.25rem;
  font-size: 1.25rem;
  font-family: sans-serif;
  width: 85vw;
}

<p>この段落は明るさを抑えています。</p>
<p>この段落は通常の明るさです。</p>
<p>この段落は明るさを増してあります。</p>

url() と SVG の brightness フィルターを用いた brightness の適用

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

例えば、適用したコンテンツを 25% （つまり、元の明るさの 75%）暗くするフィルターを作成するには、 slope 属性を 0.75 に設定します。次に、 id でフィルターを参照します。

次のコードがあったとします。

.filter {
  filter: brightness(0.75);
}
svg {
  position: absolute;
}

html

<svg role="none">
  <filter id="darken25" color-interpolation-filters="sRGB">
    <feComponentTransfer>
      <feFuncR type="linear" slope="0.75" />
      <feFuncG type="linear" slope="0.75" />
      <feFuncB type="linear" slope="0.75" />
    </feComponentTransfer>
  </filter>
</svg>

次の宣言は同様の効果をもたらします。

css

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

下記の画像では、最初の画像は brightness() フィルター機能が適用され、 2 つ目の画像は同様の SVG 明るさ機能が適用され、 3 つ目は比較用の元画像です。

<table cellpadding="5">
  <thead>
    <tr>
      <th>ライブサンプル</th>
      <th>同等の SVG</th>
      <th>元画像</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <img
          class="filter"
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="darkened pride flag" />
      </td>
      <td>
        <img
          style="filter: url(#darken25)"
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="darkened pride flag" />
      </td>
      <td>
        <img
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag" />
      </td>
    </tr>
  </tbody>
</table>

仕様書

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