CSS的背景與精靈圖

1.如何設(shè)置標(biāo)簽的背景顏色?

在CSS中有一個(gè)background-color:屬性, 就是專門用來設(shè)置標(biāo)簽的背景顏色的

取值:

具體單詞 rgb rgba 十六進(jìn)制

快捷鍵:

bc background-color: #fff;

2.如何設(shè)置背景圖片?

在CSS中有一個(gè)叫做background-image: url();的屬性, 就是專門用于設(shè)置背景圖片的

快捷鍵:

bi background-image: url();

注意點(diǎn):

1.圖片的地址必須放在url()中, 圖片的地址可以是本地的地址, 也可以是網(wǎng)絡(luò)的-
地址

2.如果圖片的大小沒有標(biāo)簽的大小大, 那么會(huì)自動(dòng)在水平和垂直方向平鋪來填充

3.如果網(wǎng)頁上有圖片, 那么瀏覽器會(huì)再次發(fā)送請求獲取圖片的數(shù)據(jù)

3.背景平鋪屬性

在CSS中有一個(gè)background-repeat屬性, 就是專門用于控制背景圖片的平鋪方式的

取值:

repeat 默認(rèn), 在水平和垂直都需要平鋪
no-repeat 在水平和垂直都不需要平鋪
repeat-x 只在水平方向平鋪
repeat-y 只在垂直方向平鋪

快捷鍵

bgr background-repeat:

應(yīng)用場景:

可以通過背景圖片的平鋪來降低圖片的大小, 提升網(wǎng)頁的訪問速度

4.背景定位屬性

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ù)的

快捷鍵:

bp background-position: 0 0;

注意點(diǎn):

同一個(gè)標(biāo)簽可以同時(shí)設(shè)置背景顏色和背景圖片, 如果顏色和圖片同時(shí)存在, 那么圖片會(huì)覆蓋顏色

5. 背景屬性縮寫

1.背景屬性縮寫的格式

background: 背景顏色 背景圖片 平鋪方式 關(guān)聯(lián)方式 定位方式;

快捷鍵:

bg+ background: #fff url() 0 0 no-repeat;

2.注意點(diǎn)：

background屬性中， 任何一個(gè)屬性都可以被省略

3.什么是背景關(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)方式

4.如何修改背景關(guān)聯(lián)方式？

在CSS中有一個(gè)叫做background-attachment的屬性， 這個(gè)屬性就是專門用于修改關(guān)聯(lián)方式的

格式

background-attachment：scroll;

取值：

scroll 默認(rèn)值， 會(huì)隨著滾動(dòng)條的滾動(dòng)而滾動(dòng)
fixed 不會(huì)隨著滾動(dòng)條的滾動(dòng)而滾動(dòng)

快捷鍵:

babackground-attachment:;

5. 背景圖片和插入圖片區(qū)別?

1.背景圖片和插入圖片區(qū)別?

1.1

背景圖片僅僅是一個(gè)裝飾, 不會(huì)占用位置 (可以在上面寫其他的標(biāo)簽及內(nèi)容)
插入圖片會(huì)占用位置 (不可以在上面寫其他的標(biāo)簽及內(nèi)容)

1.2

背景圖片有定位屬性, 所以可以很方便的控制圖片的位置
插入圖片沒有定位屬性, 所有控制圖片的位置不太方便

1.3

插入圖片的語義比背景圖片的語義要強(qiáng), 所以在企業(yè)開發(fā)中如果你的圖片想被搜索引擎收錄, 那么推薦使用插入圖片

6. CSS精靈圖

1.什么是CSS精靈圖

CSS精靈圖是一種圖像合成技術(shù)

2.CSS精靈圖作用

可以減少請求的次數(shù), 以及可以降低服務(wù)器處理壓力

3.如何使用CSS精靈圖

CSS的精靈圖需要配合背景圖片和背景定位來使用

.box1{
 width: 110px; //設(shè)置寬高
 height: 143px;
 background-position: -560px -216px; //設(shè)置xy
 }

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請關(guān)注Gxl網(wǎng)其它相關(guān)文章！

推薦閱讀：

iOS webView怎樣加載HTMLString

html5容易被忽略的小知識(shí)

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com