一、背景顏色
background-color： pink;
這個屬性后面可以加上對應的顏色。
二、背景圖片
background-image: url("./images/demo.png");
這個屬性用來添加背景圖片。
注意：背景圖片與背景顏色並不沖突，元素既可以添加背景顏色，也可以添加背景圖片。
當background-image 與 background-color同在的時候，背景圖片會壓住背景顏色，在背景圖片的縫隙中才會顯示出背景顏色。
如下圖所示：
三、背景平鋪
background-repeat: repeat | no-repate | repeat-x | repeate-y
背景平鋪默認的是平鋪repeat，背景平鋪具有以上四個基本屬性。
四、背景位置-方位名詞（重點）
background-position可以改變圖片在背景中的位置，他的后面可以使用方位名詞，也可以跟精確單位。
1、方位名詞
如果后面跟方位名詞，那么后面可以跟兩個屬性，也可以跟一個，他們決定了水平和垂直的位置。
方位名詞就是這幾個屬性： top center bottoem left center right
參數如果是方位名詞，則前后順序是沒有關系的，比如 center top = top center
如果只指定一個方位名詞，則第二個默認居中對齊 。比如right就等於right center。
使用案例：在文字面前加一個小的背景圖片
效果圖：
代碼：
<template> <h3>成長守護平台</h3> </template> <style lang="scss" scoped> h3{ width: 240px; height: 40px; // 用padding或者text-indent來給左側加上空隙 // padding-left: 10px; text-indent: 1.5em; font-size: 12px; line-height: 40px; background-color: pink; background-image: url("./images/icon.png"); background-repeat: no-repeat; background-position: left center; } </style>
2、精確單位
精確單位可以是百分數，也可以是浮點數加上單位。
精確單位有嚴格的順序，第一個是x軸，第二個是y軸，如果只指定一個值，另一個默認垂直。
3、混合單位
一個是精確單位，一個是方位名詞。同樣有順序要求，第一個是x軸，第二個是y軸。
使用案例：常見的大圖片作為整體背景
效果圖：
難點：這個圖片的寬度是1900px，要高於屏幕本身的寬度。使用background不用設置圖片的大小，而是讓他中間的部分居中就可以了。
同時應該注意要添加no-repeate的屬性，如果不添加的話，縮小屏幕，會出現這樣的情況：
代碼：
<template>
<div class="container">
</div>
</template>
<style lang="scss" scoped>
.container{
width: 100%; height: 1100px; background-image: url('./images/bg.jpg'); //注意混合使用定位時，順序有嚴格要求，先x軸后y軸 background-position: center 40px; background-repeat: no-repeat; } </style>
五、背景圖像固定（背景附着）
background-attachment: scroll | fixed；
設置背景圖像是否固定或者隨着其余部分滾動。利用它可以制作視差滾動的效果，它有兩個屬性，默認屬性是scroll。
六、復合寫法
background: 顏色 圖片 平鋪 滾動 位置;
background：color image repeat attchment position