background
backgroundは以下のプロパティの一括指定です
background-attachment
background-clip
background-color
background-origin
background-position
background-repeat
background-size
background-image
各々のプロパティを見ていきます
background-attachment
background-attachment: scroll;
背景は固定され、内容はスクロールする
background-attachment: local;
背景は内容とともにスクロールする
background-attachment: fixed;
要素とは関係なくビューポートの相対値で固定
要素及び内容の動きと関係なく固定される
初期値:scroll
background-clip
background-clip: border-box;
背景はborderまで
background-clip: padding-box;
背景はpaddingまで
background-clip: content-box;
背景はcontentまで
background-clip: text;
背景はテキスト内に表示される
初期値:border-box
background-color
background-color: red;
red,blue,Yellow等のキーワードで指定
background-color: #ffffff;
16進数で指定
background-color: #fff;
16進数短縮形(16進数で色の3桁がともに同じ英数字が並ぶ場合に省略できる)
background-color: #ffffff00;
16進数の透過
background-color: #fff0;
16進数の透過短縮形
background-color: #ffffffff;
16進数の不透過
background-color: #ffff;
16進数の不透過短縮形
background-color: rgb(255, 255, 128);
RGBで指定
background-color: rgba(117, 190, 218, 0.5);
RGBで指定50%透過
background-color: currentcolor;
現在colorに設定されている色で指定
background-color: transparent;
背景色を無効にする
初期値:transparent
background-origin
background-origin: border-box;
背景は境界から相対値になる
background-origin: padding-box;
背景はpaddingボックスから相対値になる
background-origin: content-box;
背景はcontentボックスから相対値になる
初期値:padding-box
background-position
positionの各値はbackground-originで指定した位置から相対
background-position: top;
上辺中央
background-position: bottom;
下辺中央
background-position: left;
左辺中央
background-position: right;
右辺中央
background-position: center;
中央
background-position: 75% 30%;
左辺から75%、上辺から30%の位置
background-position: 20px 50px;
左辺から20px上辺から50pxの位置
background-position: right 10px bottom 10px;
右辺から10px下辺から10pxの位置
値が1つの数値又はパーセントの場合は、X座標を指定しY座標は50%になる
値が2つの数値又はパーセントの場合は、最初がX座標、2番目がY座標になる
値が3つの場合指定できるのは、2つのキーワードと1つの値又はパーセント
値が4つの場合は1つ目と3つ目がキーワード値で、2つ目と4つ目がそのキーワードからの値又はパーセントです
初期値:0% 0%
background-repeat
指定はキーワード値のみで、値1つの一括指定の場合
background-repeat: repeat-x;
横方向に繰り返す
background-repeat: repeat-y;
縦方向に繰り返す
background-repeat: repeat;
描画領域全体に繰り返す
background-repeat: space;
画像を繰り返すのはrepeatを同じだが左辺と右辺を起点とし隙間を空白で埋め等間隔で配置される
background-repeat: round;
画像を切取らず隙間なく繰り返し配置そのために画像サイズを縮小拡大する
background-repeat: no-repeat;
繰り返し配置をしない
値2つの場合
background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;
以下は同じ結果となります
値1つ指定 値2つ指定
repeat-x repeat no-repeat
repeat-y no-repeat repeat
repeat repeat repeat
space space space
round round round
no-repeat no-repeat no-repeat
初期値:repeat
background-size
background-size: cover;
画像を描画領域に余白なく配置し余分な部分は切り取られる
画像は描画領域の縦横の長い方に100%で縮小拡大される
background-size: contain;
画像は描画領域の縦横の短い方に100%で縮小拡大される
長い方はrepeatされる
background-size: auto;
元の画像サイズを維持したまま縦横を繰り返す
background-size: 300px 50%;
元の画像サイズを横300px縦50%に縮小拡大し繰り返す
初期値:auto auto
background-image
background-image: url(./image/picture.png);
画像をurlで指定
また「,」で区切って複数指定することが出来る
background-image:linear-gradient(to bottom, rgba(255, 145, 0, 1), rgba(190, 172, 7, 0.5));
グラデーション指定
初期値:none
コメント