Aug. 29th,2018
プロパティについて
＃
＃
値
| 値 | 説明 |
|---|---|
| “<repeat-style>”値 | |
| repeat | 画像は表示領域全体を覆うのに必要な回数だけ繰り返されます (最後の画像は領域に収まりきらない場合は切り取られます。) |
| repeat-x | 水平方向にのみ繰り返されます (最後の画像は領域に収まりきらない場合は切り取られます。) |
| repeat-y | 垂直方向にのみ繰り返されます (最後の画像は領域に収まりきらない場合は切り取られます。) |
space |
画像は表示領域全体を覆うのに必要な回数だけ繰り返されます (繰り返された画像が整数倍で収まりきらない場合、画像と画像の間に空白が入ります。 最初と最後の画像は表示領域の端に接します。) |
| round |
画像は表示領域全体を覆うのに必要な回数だけ繰り返されます (繰り返された画像が整数倍で収まりきらない場合、整数倍で収まるように拡大縮小されて表示されます。) |
| no-repeat | 画像は繰り返されません |
| 他の値 | |
| 共通キーワード | |
＃
値の指定方法
値を一つ指定する場合
値を一つ指定する場合その値は水平方向と垂直方向両方の繰り返し方法を指定します。
div { background-repeat: 〚繰り返し方法〛;}
値を二つ指定する場合
値を二つ指定する場合一つ目の値は水平方向の繰り返し方法、二つ目の値は垂直方向の繰り返し方法を指定します。“repeat-x”および“repeat-y”は指定できません。
div { background-repeat: 〚水平方向の繰り返し方法〛 〚垂直方向の繰り返し方法〛;}
複数の背景画像がある場合
“background-image”プロパティで複数の背景画像が指定されている場合、値のセットをコンマ(“,”)で区切って記述することでそれぞれの背景画像の繰り返し方法を指定することができます。値の順番は“background-image”で指定した値の順番に対応します。
div {
background-repeat: repeat-x,space no-repeat,repeat;
background-image: url(sample/background_sample3.png),url(background_sample.png),url(background_sample2.png);
}
＃
使用例
＃
背景画像を指定する
値を一つ指定する
div { background-repeat: repeat;}
div { background-repeat: space;}
div { background-repeat: round;}
div { background-repeat: repeat-x;}
div { background-repeat: no-repeat;}
値を二つ指定する
div { background-repeat: repeat repeat;}
div { background-repeat: no-repeat repeat;}
div { background-repeat: repeat no-repeat;}
div { background-repeat: repeat space;}
div { background-repeat: round space;}
＃
