本博文記錄CSS中比較常用的背景屬性，包括背景顏色：background-color、背景圖片：background-image、背景平鋪：background-repeat、背景位置：background-position和背景附著：background-attachment，同時記錄了背景色半透明的寫法以及背景屬性復合寫法，
1 常用背景屬性
| 屬性 | 描述 | 使用方式 | 說明 |
| background-color | 背景顏色 | 引數; |
引數： transparent（透明，默認） color（顏色） |
| background-image | 背景圖片 | background-image: 引數; |
引數： none（無背景圖，默認） url(圖片地址) |
| background-repeat | 背景平鋪 | background-repeat: 引數; |
引數： repeat（橫向、縱向均平鋪，默認） no-repeat（不平鋪） repeat-x（橫向平鋪） repeat-y（縱向平鋪） |
| background-position | 背景位置 | background-position: x y; |
x：橫坐標，可以使用方位名詞或者精確單位 y：縱坐標，可以使用方位名詞或者精確單位 方位名詞：center、top、bottom、left、right 精確單位：百分數或者由浮點數字和單位識別符號組成的長度值 |
| background-attachment | 背景附著 | background-attachment: 引數; |
引數： scroll（背景影像是隨著物件內容滾動，默認） fixed（背景影像固定） |
background-position（背景位置）的引數有兩個（x 和 y），需要注意以下幾點：
（1）若x和y都是方位名詞，則無順序；
（2）若只指定一個方位名詞，另一個省略，則另一個默認為center；
（3）若引數值是精確坐標，則第一個肯定是x坐標，第二個肯定是y坐標；
（4）若引數值是精確坐標且只指定一個數值，則一定是x坐標，另一個默認垂直居中；
（5）若引數值是混合單位，則第一個是x坐標，第二個是y坐標，
2 背景色半透明
背景色半透明，通過對background屬性設定rgba屬性值實作，
使用方式：background: rgba(red,green,blue,Alpha)；
引數：
| 引數 | 范圍 |
| red | 0-255 |
| green | 0-255 |
| blue | 0-255 |
| Alpha | 0-1 |
說明：Alpha是透明度，取值范圍在0-1，0：全透明，1：不透明，同時，Alpha的值是小數，小數點前的0可以省略，
3 背景屬性復合寫法
background: 背景顏色 背景圖片 背景平鋪 背景附著 背景位置;
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/549450.html
標籤：其他
上一篇：TS 匯入匯出那些事
下一篇：前端設計模式——MVVM模式