CSS - filter

トップ > CSSリファレンス > filter

概要

属性名 filter
none | <filter-value-list>
値の詳細 <filter-value-list> = [ <filter-function> | <url> ]+
<filter-function> =
  blur(<length>?) |
  brightness(<number-percentage>?) |
  contrast(<number-percentage>?) |
  drop-shadow(<color>? && <length>{2,3}) |
  grayscale(<number-percentage>?) |
  hue-rotate([<angle> | <zero>]?) |
  invert(<number-percentage>?) |
  opacity(<number-percentage>?) |
  saturate(<number-percentage>?) |
  sepia(<number-percentage>?)
初期値none
適用可能要素すべての要素
継承継承しない

サポート (説明)

CSSIEEdgeFirefoxChromeOperaSafari
基本CSS3(未)133553409.1

説明

画像などの要素に対して、ぼかし、影つけ、透明化などのフィルタを適用します。Internet Explorer ではサポートされていません。下記の例では元の画像(左)に、ぼかしのフィルタを適用しています。

HTML
<img src="neko.jpg">
<img src="neko.jpg" style="filter:blur(2px)">
表示
neko neko

一度に複数のフィルタを適用することも可能です。下記の例では、ぼかしと透明化のフィルタを適用しています。

HTML
<img src="neko.jpg" alt="neko">
<img src="neko.jpg" alt="neko" style="filter:blur(2px) opacity(40%)">
表示
neko neko

画像だけではなく、テキストなどの要素に対しても適用できます。

HTML
<span style="font-size:24pt;">FILTER</span>
<span style="font-size:24pt; filter:drop-shadow(3px 3px 1px #999)">FILTER</span>
表示
FILTER FILTER

詳細

◆ filter: blur( [ length ] )

要素をぼかします。length にはぼかしの強さを 2px などの長さで指定します。省略時のデフォルト値は 0px (ぼかし無し) です。

HTML
<img src="neko.jpg" alt="neko">
<img src="neko.jpg" alt="neko" style="filter:blur(2px)">
表示
neko neko
◆ filter: brightness(rate)

要素の明暗を調整します。rate には 1.7 や 170% などの強度を指定します。省略時のデフォルト値は 1 (変更無し) です。

HTML
<img src="neko.jpg" alt="neko">
<img src="neko.jpg" alt="neko" style="filter:brightness(1.7)">
表示
neko neko
◆ filter: contrast(rate)

要素のコントラストを指定します。rate には 1.7 や 170% などの強度を指定します。省略時のデフォルト値は 1 (変更無し) です。

HTML
<img src="neko.jpg" alt="neko">
<img src="neko.jpg" alt="neko" style="filter:contrast(2.0)">
表示
neko neko
◆ filter: drop-shadow(x y blur color)

要素に影をつけます。xy には影を右方向、下方向にどのくらいずらして表示するかを指定します。blur には影をぼかす度合いを指定します。省略時は 0 (ぼかし無し)とみなされます。color には影の色を指定します。省略時は現在の color 値が適用されます。

HTML
<img src="neko.jpg" alt="neko">
<img src="neko.jpg" alt="neko" style="filter:drop-shadow(6px 6px 2px #999)">
表示
neko neko
◆ filter: grayscale(rate)

要素をグレーにします。rate には 0%~100% または 0~1.0 までの度合いを指定します。省略時のデフォルト値は 1 (完全にグレー化) です。

HTML
<img src="neko.jpg" alt="neko">
<img src="neko.jpg" alt="neko" style="filter:grayscale(1.0)">
表示
neko neko
◆ filter: hue-rotate(angle)

要素の色相を変換します。angle には 0deg ~ 360deg の色相変化量を指定します。省略時のデフォルト値は 0deg (変化無し) です。

HTML
<img src="neko.jpg" alt="neko">
<img src="neko.jpg" alt="neko" style="filter:hue-rotate(180deg)">
表示
neko neko
◆ filter: invert(rate)

要素の階調を反転させます。rate には 0%~100% または 0~1.0 までの反転度合いを指定します。省略時のデフォルト値は 1 (完全反転) です。

HTML
<img src="neko.jpg" alt="neko">
<img src="neko.jpg" alt="neko" style="filter:invert(100%)">
表示
neko neko
◆ filter: opacity(rate)

要素を透明にします。rate には 0%~100% または 0~1.0 までの不透明度を指定します。省略時のデフォルト値は 1 (完全不透明) です。

HTML
<img src="neko.jpg" alt="neko">
<img src="neko.jpg" alt="neko" style="filter:opacity(30%)">
表示
neko neko
◆ filter: saturate(rate)

要素の彩度を調整します。rate には 1.7 や 170% の様な割合を指定します。省略時のデフォルト値は 1 (変更しない) です。

HTML
<img src="neko.jpg" alt="neko">
<img src="neko.jpg" alt="neko" style="filter:saturate(200%)">
表示
neko neko
◆ filter: sepia(rate)

要素をセピア調にします。rate には 0%~100% または 0~1.0 までの度合いを指定します。省略時のデフォルト値は 1 (完全セピア化) です。

HTML
<img src="neko.jpg" alt="neko">
<img src="neko.jpg" alt="neko" style="filter:sepia(100%)">
表示
neko neko
◆ filter: url(url#filter-name)

要素に SVGフィルタを適用します。下記の例では、画像に対して、SVG 中に定義された myFilter という名前のフィルタを適用しています。上記の組み込み関数のみを用いるよりも、より詳細なフィルタを作成することができます。

HTML
<img src="neko.jpg" alt="neko">
<img src="neko.jpg" alt="neko" style="filter:url(#myFilter)">
<svg width="0px" height="0px" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="myFilter">
      <feGaussianBlur stdDeviation="2"/>
    </filter>
  </defs>
</svg>
表示
neko neko

リンク


Copyright (C) 2020 杜甫々
初版:2020年1月5日、最終更新:2020年1月5日
http://www.tohoho-web.com/css/prop/filter.htm