css背景和精靈圖
背景
1.如何設(shè)置背景圖片?
在CSS中有一個(gè)叫做background-image: url();的屬性, 就是專門用于設(shè)置背景圖片的
2.快捷鍵:
bi background-image: url();
3注意點(diǎn):
1.圖片的地址必須放在url()中, 圖片的地址可以是本地的地址, 也可以是網(wǎng)絡(luò)的地址
2.如果圖片的大小沒(méi)有標(biāo)簽的大小大, 那么會(huì)自動(dòng)在水平和垂直方向平鋪來(lái)填充
3.如果網(wǎng)頁(yè)上出現(xiàn)了圖片, 那么瀏覽器會(huì)再次發(fā)送請(qǐng)求獲取圖片
背景圖片平鋪
1.如何控制背景圖片的平鋪方式?
在CSS中有一個(gè)background-repeat屬性, 就是專門用于控制背景圖片的平鋪方式的
2.取值:
repeat 默認(rèn), 在水平和垂直都需要平鋪
no-repeat 在水平和垂直都不需要平鋪
repeat-x 只在水平方向平鋪
repeat-y 只在垂直方向平鋪
3.快捷鍵
bgr background-repeat:
4.應(yīng)用場(chǎng)景:
可以通過(guò)背景圖片的平鋪來(lái)降低圖片的大小, 提升網(wǎng)頁(yè)的訪問(wèn)速度
背景圖片定位
1.如何控制背景圖片的位置?
在CSS中有一個(gè)叫做background-position:屬性, 就是專門用于控制背景圖片的位置
2.格式:
background-position: 水平方向 垂直方向;
3.取值
3.1具體的方位名詞
水平方向: left center right
垂直方向: top center bottom
3.2具體的像素
例如: background-position: 100px 200px;
記住一定要寫單位, 也就是一定要寫px
記住具體的像素是可以接收負(fù)數(shù)的
4.快捷鍵:
bp background-position: 0 0;
5.注意點(diǎn):
同一個(gè)標(biāo)簽可以同時(shí)設(shè)置背景顏色和背景圖片, 如果顏色和圖片同時(shí)存在, 那么圖片會(huì)覆蓋顏色
背景圖片關(guān)聯(lián)和縮寫
1.背景屬性縮寫的格式
background: 背景顏色 背景圖片 平鋪方式 關(guān)聯(lián)方式 定位方式;
2快捷鍵:
bg ?background: #fff url() 0 0 no-repeat;
3.注意點(diǎn)：
background屬性中， 任何一個(gè)屬性都可以被省略
4.什么是背景關(guān)聯(lián)方式？
默認(rèn)情況下背景圖片會(huì)隨著滾動(dòng)條的滾動(dòng)而滾動(dòng)羔沙， 如果不想讓背景圖片隨著滾動(dòng)條的滾動(dòng)而滾動(dòng)， 那么我們就可以修改背景圖片和滾動(dòng)條的關(guān)聯(lián)方式
5.如何修改背景關(guān)聯(lián)方式疗我？
在CSS中有一個(gè)叫做background-attachment的屬性， 這個(gè)屬性就是專門用于修改關(guān)聯(lián)方式的
6.格式
background-attachment：scroll;
7.取值：
scroll 默認(rèn)值南捂， 會(huì)隨著滾動(dòng)條的滾動(dòng)而滾動(dòng)
fixed 不會(huì)隨著滾動(dòng)條的滾動(dòng)而滾動(dòng)
8.快捷鍵:
ba background-attachment:;
背景圖片和插入圖片區(qū)別
1.背景圖片和插入圖片區(qū)別?
背景圖片僅僅是一個(gè)裝飾, 不會(huì)占用位置
插入圖片會(huì)占用位置
背景圖片有定位屬性, 所以可以很方便的控制圖片的位置
插入圖片沒(méi)有定位屬性, 所有控制圖片的位置不太方便
插入圖片的語(yǔ)義比背景圖片的語(yǔ)義要強(qiáng), 所以在企業(yè)開發(fā)中如果你的圖片想被搜索引擎收錄, 那么推薦使用插入圖片
