repeating-linear-gradient

概要

CSS の repeating-linear-gradient 関数は、グラデーションの繰り返しによる <画像> を作ります。linear-gradient に書かれているような基本的な線形グラデーションと似た動作をし、同じ引数をとりますが、最初と最後のカラーストップ間の距離の倍数分だけカラーストップを移動させながら、自動的にカラーストップを両方向に無限に繰り返します。

この結果、グラデーションの最初と最後の色は常に隣り合わせになります。二つが同じ色でなければ、はっきりとした変わり目ができるでしょう。

他のグラデーションと同じく、CSS グラデーションの繰り返しも CSS の <color> ではなく、固有のサイズを持たない画像です。これは、画像本来のサイズや、優先されるサイズを持たないということです(アスペクト比についても同様です)。実際のサイズは、グラデーションの用いられる要素にマッチしたものになるでしょう。

Mozilla は現在、CSS グラデーションを background-image および background プロパティの値としてのみサポートしています。画像の URL の代わりに、グラデーション値を指定します。

構文

Formal grammar: repeating-linear-gradient(  [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
                                            \---------------------------------/ \----------------------------/
                                              Definition of the gradient line         List of color stops  

                              where <side-or-corner> = [left | right] || [top | bottom]
                                and <color-stop>     = <color> [ <percentage> | <length> ]?
repeating-linear-gradient( 45deg, blue, red );           /* 45deg 方向に軸を延ばし、青で始め赤で終わるグラデーションの繰り返し */
repeating-linear-gradient( to left top, blue, red);      /* 右下から左上に延び、青で始め赤で終わるグラデーションの繰り返し */

repeating-linear-gradient( 0deg, blue, green 40%, red ); /* 下から上に延び、青で始め、
                                                            40% から緑になり、赤で終わるグラデーションの繰り返し */

<side-or-corner>
to に続けて指定し、グラデーションラインの終点を表します。グラデーションボックスの横の辺を表すキーワード leftright と、縦の辺を表す topbottom の片方、または両方を記述します。キーワードの順番は任意です。
to top、to bottomto leftto right はそれぞれ、角度 0deg180deg270deg90deg に変換されます。
to top left のように 2 つの方向を与えると、その方向にあるボックスのコーナーを指し、始点とコーナーを結ぶ直線がグラデーションラインと直交し、始点とコーナーが同じ象限になるような角度に変換されます。こうして、<color-stop> に書かれた色が正確にコーナーに使われます。これは "マジックコーナー" プロパティと呼ばれることがあります。グラデーションラインの始点と終点は、グラデーションボックスの中心に対して点対称な位置にあります。
<side-or-corner><angle> も指定しない場合、デフォルト値 to bottom が使われます。
<angle>
グラデーションの方向を示す角度。<角度> をご覧ください。
<side-or-corner><angle> も指定しない場合、デフォルト値 to bottom が使われます。
<color-stop>
この値は <color> 値と、それに続く省略可能な停止位置(0% から 100% の割合またはグラデーションの軸に沿った <length>)からなります。
CSS グラデーションのカラーストップの描画は、SVG グラデーションのカラーストップと同じ規則に従います。

background: repeating-linear-gradient(to bottom right, red, red 5px, white 5px, white 10px);

仕様

仕様書 策定状況 コメント
CSS Image Values and Replaced Content Module Level 3 勧告候補  

ブラウザ実装状況

機能 Firefox (Gecko) Chrome Internet Explorer Opera Safari
基本サポート (backgroundbackground-image での利用) 3.6 (1.9.2)-moz[3]
16 (16)
10.0 (534.16)-webkit [2][3] 10.0 [1] 11.10-o [3] 5.1-webkit[2][3]
<画像> を受け入れる全プロパティ 未サポート (有) ? ? (有)
Legacy な webkitの構文 未サポート 3-webkit [2] 未サポート 未サポート 4.0-webkit[2]
Legacy な from 構文 (to なし) 3.6 (1.9.2)-moz [4]
Removed in 16 (16)
10.0 (534.16)-webkit [2] 10.0 11.10-o[4] 5.1-webkit[2]
to 構文 10 (10)-moz[4]
16 (16)
26 10.0 11.60-o[4]
Presto 2.12でプレフィックスを取り除く予定
未サポート

[1] Internet Explorer 5.5 から 9.0 はプロプライエタリな filter: progid:DXImageTransform.Microsoft.Gradient() 関数をサポートしています。

[2] WebKit は 528 からレガシーな -webkit-gradient(linear,…) 関数をサポートしています。WebKit 534.16 時点で、標準的なグラデーションの構文もサポートしています。Gecko と違って、レガシーな WebKit では  -webkit-linear-gradient() で位置と角度の両方を指定することはできません。カラーストップを補うと、同じ効果を実現できます。

[3] Gecko、Opera と Webkit は <角度> を上ではなく右から開始します。したがって 0deg は右方向を指す指示になります。これは最新の仕様とは異なります。最新の仕様では、0deg は上方向を指す指示になります。

[4] Firefox 3.6 と Opera 11.10 は、開始コーナーまたはサイドが to キーワードなしで示され、事実上 from の位置であるとみなされる、初期の構文をプレフィックス版として実装しました。to 構文は Firefox 10 と Opera 11.60 で追加されましたが、非推奨の構文は初め、取り除かれませんでした。この二つの書き換えはわずかです:

-moz-repeating-linear-gradient(to top left, blue, red);

これは次と同じです:

-moz-repeating-linear-gradient(bottom right, blue, red);

to なしのレガシーな構文は、プレフィックスが取り除かれたときになくされる予定です。

関連情報

Document Tags and Contributors

Contributors to this page: sosleepy, ethertank
最終更新者: ethertank,
サイドバーを隠す