## 背景
# 百度首頁(yè)案例
# 背景圖片 background-image
# 背景平鋪屬性 background-repeat
# 背景圖片定位屬性 background-position
# 背景圖片關(guān)聯(lián)方式 background-attachment
#精靈圖
# 多重背景
# 背景尺寸屬性 background-size
# 背景定位區(qū)域?qū)傩?background-orange
# 背景繪制區(qū)域?qū)傩?background-clip
如何設(shè)置標(biāo)簽的背景顏色?
在CSS中有一個(gè)background-color:屬性,就是專門給標(biāo)簽設(shè)置背景顏色的
如何設(shè)置背景圖片?
在CSS中有一個(gè)background-image:url();的屬性,就是專門用于設(shè)置背景圖片的
注意點(diǎn):
1.圖片的地址必須放在url()的括號(hào)中,圖片的地址可以是本地的地址,也可以是網(wǎng)絡(luò)圖片
2.如果圖片的大小沒有標(biāo)簽的大小大,那么會(huì)自動(dòng)在水平方向平鋪鋪滿和填充
3.如果網(wǎng)頁(yè)上出現(xiàn)了圖片,那么瀏覽器會(huì)再次發(fā)送請(qǐng)求獲取圖片
如何控制背景圖片的平鋪方式?
在CSS中有一個(gè)background-repeat屬性,就是專門用于控制背景圖片平鋪方式的
background-repeat: 取值;
取值:
repeat(默認(rèn))
no-repeat
repeat-x
repeat-y
應(yīng)用場(chǎng)景:
可以通過背景圖片的平鋪來降低圖片的大小,提升網(wǎng)頁(yè)加載的速度
如何控制背景圖片的位置?
在CSS中有一個(gè)background-position:屬性,就是專門用于控制背景圖片的位置
格式:
background-position:水平方向 垂直方向;
取值:
-具體的方位名詞
水平方向:
top
left
right
垂直方向:
top
center
bottom
-像素:
例如:background-position:5px 20px;
注意點(diǎn):
同一個(gè)標(biāo)簽可以同時(shí)設(shè)置背景顏色和背景圖片,如果顏色和圖片同時(shí)存在,那么圖片會(huì)覆蓋顏色
像素一定要帶單位
像素可以接受負(fù)數(shù)
1.背景屬性縮寫的格式
background:背景顏色 背景圖片 平鋪方式 關(guān)聯(lián)方式 定位方式;
background-color
background-image
background-align
background-attachment
background-position
background:red url() norepeat left bottom;
快捷鍵:
bg+ + tab
注意點(diǎn):
background屬性中,任何屬性都可以被省略
什么是背景關(guān)聯(lián)方式?
默認(rèn)情況下背景圖片會(huì)隨著滾動(dòng)條的滾動(dòng)而滾動(dòng),那么我們就可以修改背景圖片和滾動(dòng)條的關(guān)聯(lián)方式
如何修改背景關(guān)聯(lián)方式?
-在CSS中有一個(gè)background-attachment的屬性,就是專門用于修改背景圖片關(guān)聯(lián)方式的
-格式:
background-attachment: 取值;
取值:
scroll 會(huì)隨著滾動(dòng)條滾動(dòng)而滾動(dòng)
fixed 不會(huì)隨著滾動(dòng)條滾動(dòng)而滾動(dòng)
背景圖片和插入圖片有什么區(qū)別?
1.1
背景圖片僅僅是一個(gè)裝飾,不會(huì)占用位置
插入圖片會(huì)占用位置
1.2
背景圖片有定位屬性,可以很方便的控制圖片的位置
插入圖片沒有定位屬性,所以控制圖片的位置不太方便
1.3
插入圖片的語(yǔ)義比背景圖片的語(yǔ)義要搶,所以在企業(yè)開發(fā)中如果你的圖片想被搜索引擎收錄,那么推薦使用插入圖片
可以用div嵌套實(shí)現(xiàn)多個(gè)背景圖片嵌套
1.什么是CSS精靈圖?
CSS精靈圖是一種圖像合成技術(shù)
2.CSS精靈圖作用
可以減少請(qǐng)求的次數(shù),以及可以降低服務(wù)器處理壓力
3.如何使用CSS精靈圖
CSS的精靈圖需要配合背景圖片和背景定位來使用
(fireworks軟件進(jìn)去記得先用鎖鎖住打開圖片的那個(gè)圖層否則以后容易造成圖標(biāo)錯(cuò)位)
怎么設(shè)置多重背景?
-連寫用逗號(hào)隔開
-分開寫用逗號(hào)隔開
注意點(diǎn):
先添加的圖片會(huì)顯示在上面
什么是背景尺寸屬性? background-size
背景尺寸屬性是CSS3中新增的一個(gè)屬性,專門用于設(shè)置背景圖片大小
1.默認(rèn)
2.具體像素
3.百分比
4.寬度等比拉伸auto,50px
5.高度等比拉伸50px,auto
6.cover寬高等比拉伸,并且占滿元素CSS3
7.contain寬高等比拉伸,寬度或高度填滿元素即停止拉伸
什么是背景定位區(qū)域?qū)傩? background-orange
-告訴系統(tǒng)圖片/顏色從什么區(qū)域開始顯示
取值:
padding-box默認(rèn)
border-box
contain-box
規(guī)定背景的繪制區(qū)域background-clip
-背景繪制區(qū)域?qū)傩允菍ｉT用于指定從哪個(gè)區(qū)域開始繪制背景的,默認(rèn)情況下是從border開始繪制的
取值:
border-box默認(rèn)
padding-box
content-box
