* 背景顏色 * 漸變色背景 [https://webgradients.com/](https://webgradients.com/) * 多背景疊加 * 背景圖片和屬性\(雪碧圖\) * base64和性能優化 * 多分辨率適配 ### 1.純的背景色 * 1.1 hsla ```css //色相，飽和度，明度，透明度 background:hsla(230,50%,50%,.6); ``` * 1.2rgba ```css background:rgba(20,30,243,.5) ``` * 1.3背景的簡寫 ``` background:color img repeat position; ``` ## 2.雪碧圖 ``` background-position:x y //去調整圖片的位置 ``` ### 3.base64 一串文本 ``` 好處:減少http連接數 壞處: 1.文件的體積會增大 會增大1/3 2.解碼難度增大 適用場合:只適合小圖片 ``` 在項目中通過構建的方式,轉換為base64