認識CSS#6 background

# 認識CSS#6 background ###### tags: `CSS` ## [background-color](https://developer.mozilla.org/zh-TW/docs/Web/CSS/background-color) - 背景顏色 效果 : 設定 HTML 元素的背景顏色，值可以是顏色也可以是特定關鍵字 **[HTML color code 傳送門](https://htmlcolorcodes.com/)** ```=CSS background-color: /*color code or color name */ ``` ## [background-image](https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-image) - 背景圖片 效果 : 為一個元素設置一個或多個背景圖片 ```=CSS background-image: /* url("") linear-gradius(degree, color) */ ``` ### linear-gradius 用漸層設立背景 ```=CSS linear-gradius(degree , color) // degree是gradient軸的角度，與它垂直的兩端是起點顏色與終點顏色 ``` ![](https://i.imgur.com/yLKAfSD.png) **gradius軸線角度從下方為起點，以下為各角度顏色渲染的方向** #### 0 deg : 顏色起點是下方，終點是上方 #### 90 deg : 起點是左方，終點是右方 #### 180 deg : 起點是上方，終點是下方 #### 270 deg : 起點是右方，終點是左方 #### 360 deg : 回到 0deg 的方向 ## [background-repeat](https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-repeat) - 背景圖片重複 效果 : 背景圖片是否重複、如何重複顯示 ```=CSS background-repeat: /* no-repeat repeat round ... */ ``` ## [background-size](https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-size) - 背景圖片大小 效果 : 調整背景圖片大小 ```=CSS background-size: /* contain % px cover*/ ``` #### background-size:cover 會把背景圖片拉到最大，直到整個瀏覽器頁面都滿的 ## [background-position](https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-position) - 背景圖片位置 效果 : 定位背景的位置，可以以方位名稱(top、left、center、right、bottom)為參數，也可以用單位與數值來當作參數 ```=CSS background-position : /* top left center right bottom % px */ ``` ## 參考 [Day18 CSS基本樣式-Background(上)](https://ithelp.ithome.com.tw/articles/10223887)