分類:純色背景 背景圖像
1、背景顏色
background-color : 任意合法的顏色 和 transparent
2、背景圖像
background-image : url(想要加載的圖片)
3、背景圖片平鋪
background-repeat :
repeat:默認值水平垂直方向都平鋪
repeat-x : 水平方向平鋪
repeat-y : 垂直方向平鋪
no-repeat : 默認不平鋪
4、背景圖片的尺寸
background-size : value1 value2 寬度 高度 (單位px)
value% value% 寬度 高度 (單位%)
cover :全覆蓋 將背景圖等比放大知道背景圖完全覆蓋到元素的所有區域
contain : 包含 將背景圖等比放大,直到下邊或者右邊有一個邊緣碰到元素為止
5、背景圖片固定
background-attachment : fixed;(固定)
scorll(滾動)
6、背景定位
改變背景圖片在元素中的默認位置
background-position : 注意對於這個Firefox和Opera,background-attachment必須設置為“fixed”(固定)
left(top,center,bottom)
right(top,center,bottom)
center(top,center,bottom)
x% y%(注意第一個值是水平位置,第二個值是垂直位置;左上角是0% 0% ,右下角是100% 100%,如果只指定了一個值其他值是50%,默認為0% 0%)
xpos ypos(第一個值是水平位置,第二個值是垂直位置;單位可以是像素也可以是其他css單位,如果只指定了一個值其他值是50%;可以使用%和positions)
inherit : 指定background-position屬性設置應該從父元素繼承
7、雪碧圖、精靈圖
作用:將一些小的背景圖合並到大的背景中去,以便實現減少服務器的請求
步驟:1>、我們根據圖像的大小創建一個元素
2>、將多張圖片合並為一張圖片,下載全部所需的資源,只需一次請求,減少鏈接的消耗