CSS - 背景

背景

.box {
  /* background-color 背景顏色 */
  background-color: #faa;

  /* background-image 背景圖片 */
  background-image: url('https://picsum.photos/100/100/?random=1');

  /* background-repeat 背景重複 */
  /* repeat-x、repeat-y、no-repeat */
  background-repeat: repeat;

  /* background-position 背景定位 */
  /* 可使用數值、百分比、left、right、center、top、bottom 關鍵字 */
  background-position: 50% 50%;

  /* background-size 背景尺寸 */
  /* contain、cover、數值、百分比 */
  background-size: cover;

  /* 當背景設定為 background-attachment:fixed; `原始圖片的放置位置是以視埠為基準`，
  也就是會以視埠左上角開始平舖，而不是從個別元素的區塊開始平鋪。 */
  background-attachment: fixed;

  /* 縮寫 */
  background: #ffa url('https://picsum.photos/100/100/?random=1') repeat center center/cover;
}

漸層

/* 線性漸層 */
.linear-gradient {
  background: linear-gradient(red, yellow, white);
  /* 設定角度 */
  background: linear-gradient(45deg, red, yellow, white);
  /* 設定漸層站點 */
  background-image: linear-gradient(to right top, #fff 0%, lightblue 25%, #fff 50%, lightblue 75%, #fff 100%);
}
/* 放射漸層 */
.radial-gradient {
  background-image: radial-gradient(white, #ffffaa, pink);
}