---
# System prepended metadata

title: 認識CSS#6 background
tags: [CSS]

---

# 認識CSS#6 background
###### tags: `CSS`

## [background-color](https://developer.mozilla.org/zh-TW/docs/Web/CSS/background-color) - 背景顏色
<font color=#8F0862> 效果 :</font> 設定 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) - 背景圖片
<font color=#8F0862> 效果 :</font> 為一個元素設置一個或多個背景圖片
```=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) - 背景圖片重複
<font color=#8F0862> 效果 :</font> 背景圖片是否重複、如何重複顯示
```=CSS
background-repeat: /* no-repeat repeat round ... */
```
## [background-size](https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-size) - 背景圖片大小
<font color=#8F0862> 效果 :</font> 調整背景圖片大小
```=CSS
background-size: /* contain % px cover*/
```
#### background-size:cover
會把背景圖片拉到最大，直到整個瀏覽器頁面都滿的

## [background-position](https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-position) - 背景圖片位置
<font color=#8F0862> 效果 :</font> 定位背景的位置，可以以方位名稱(top、left、center、right、bottom)為參數，也可以用單位與數值來當作參數
```=CSS
background-position : /* top left center right bottom %  px */
```
## 參考
[Day18 CSS基本樣式-Background(上)](https://ithelp.ithome.com.tw/articles/10223887)