什么是精靈圖？在css中如何使用精靈圖

CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進行背景定位，background-position可以用數字能精確的定位出背景圖片的位置。這樣可以減少很多圖片請求的開銷，因為請求耗時比較長；請求雖然可以并發(fā)，但是也有限制，一般瀏覽器都是6個。對于未來而言，就不需要這樣做了，因為有了`http2`。

創(chuàng)新互聯專注于亞東網站建設服務及定制，我們擁有豐富的企業(yè)做網站經驗。 熱誠為您提供亞東營銷型網站建設，亞東網站制作、亞東網頁設計、亞東網站官網定制、微信小程序開發(fā)服務，打造亞東網絡公司原創(chuàng)品牌,更為您提供亞東網站排名全網營銷落地服務。

具體請查看“background-image”，“background- repeat”，“background-position”的使用方法

精靈圖的介紹

什么是精靈圖？

就是將幾張較小的圖片放在一張大圖上

為什么要有精靈圖？

最早的時候網速十分有限，為了提升用戶體驗，我們會將一張大圖分解成多張小圖來提高頁面打開速度，但是網速得到了提升，為了能夠讓服務器承載更多的請求，我們要減少瀏覽器對服務器的請求，最直接的方式，就是將多張較小的圖片放在一張大圖上，從而減輕服務器的壓力。而將多張小圖放到一張大圖上的操作就叫做精靈圖，也可以叫做雪碧技術 也叫做css sprite

精靈圖的使用

一張大的圖片上有很多小的圖片，那么如何將這個小的圖片拿出來呢？

1.如果我們需要的一張圖片在精靈圖上，必須要了解這個圖片的大小以及在精靈圖上的位置

比如：新浪網上的搜索按鈕，首先得到它的寬高和位置

2.在頁面上將這個圖片顯示出來，在顯示的時候一定要注意我們容器的大小一定要和這個圖標的大小一樣

比如：我們要html頁面上放一個div，寬高為圖片的搜索按鈕的寬高

3.將精靈圖設置為容器的背景圖片，并且根據圖片所在的位置將背景圖片進行平移

制作精靈圖

1.精靈圖必須是一些小的圖片

2.精靈圖的多個小圖之間一定要留有足夠的間隙

3.精靈圖的大小一定要大于所有圖片中最大的那個

4.完成精靈圖以后一定要在精靈圖下方留有足夠的空隙，方便將來再次添加其它的精靈圖

5.如果是頁面上一個像素的背景圖片不要放在精靈圖上面

精靈圖(sprites)：使用 代碼 案例

使用精靈圖核心：

1、精靈技術主要針對于背景圖片使用，就是把多個小背景圖片整合到一張大圖片中。

2、這個大圖片也稱為sprites 精靈圖或者雪碧圖

3、移動背景圖片位置，此時可以使用background-position

4、移動的距離是這個目標圖片的x和y坐標，注意網頁中的坐標有所不同

5、因為一般情況下都是往上往左移動，所以數值是負值。

6、使用精靈圖的時候需要精確測量，每個小背景圖片的大小和位置。

06-CSS背景和精靈圖

1.如何設置標簽的背景顏色?

1.如何設置背景圖片?

注意點:

1.如何控制背景圖片的平鋪方式?

應用場景:可以通過背景圖片的平鋪來降低圖片的大小, 提升網頁的訪問速度

1.如何控制背景圖片的位置?

注意點:同一個標簽可以同時設置背景顏色和背景圖片, 如果顏色和圖片同時存在, 那么圖片會覆蓋顏色

1.背景屬性縮寫的格式

2.注意點：background屬性中， 任何一個屬性都可以被省略

3.什么是背景關聯方式？

4.如何修改背景關聯方式？

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

1.什么是CSS精靈圖

CSS精靈圖是一種 圖像合成技術

2.CSS精靈圖作用

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

3.如何使用CSS精靈圖

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

怎樣制作CSS精靈圖

方法1.用ps或者dw把需要的圖片切下來，自己通過ps，把需要的圖片整合拼合成一張圖片。在利用css中的background-image”，“background- repeat”，“background-position”的組合進行背景定位，background-position可以用數字能精確的定位出背景圖片在布局盒子對象位置，當然這種效率是最慢的一種。

方法2.最簡單的一種。（推薦用這種）把需要的圖片用ps切出來，然后在線生成 只要把需要的圖片放在里面，即可生成你需要的css代碼。

老師讓在網上找精靈圖做動圖，不過精靈圖怎么做？

什么是精靈圖：

css精靈(CSS sprites),是一種網頁圖片應用處理技術。主要是指將網頁中需要的零星的小圖片集成到一個大的圖片中

應用的原因：

1.減少對瀏覽器的請求次數，避免網頁的延遲

2.方便小圖標的統一管理

精靈圖的制作：

1.軟件：ps

2.制作方法：

新建透明圖層

添加參考線將畫布劃分，將小圖標放入劃分好的格子中

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

1.引入精靈圖

.basic{

background-image:url(ui.png);

width:80px;

height:80px;

background-repeat:no-repeat;

display:inline-block;

}

2.精確定位需要顯示的小圖標坐標

.sprite1{

background-position:80px 0px

}

.sprite2{

background-position:160px 160px

}

文章名稱：css樣式中精靈圖的使用,css精靈圖代碼
鏈接分享：http://www.chinadenli.net/article30/dseojso.html

成都網站建設公司_創(chuàng)新互聯，為您提供品牌網站設計、網站設計公司、網站建設、電子商務、商城網站、自適應網站

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯