中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

如何制作并使用css精靈圖/csssprites?

2023-02-27    分類: 網(wǎng)站建設(shè)

一,什么是css精靈圖?
引用百度百科的原話,CSS Sprites在國內(nèi)很多人叫css精靈,是一種網(wǎng)頁圖片應(yīng)用處理方式。它允許你將一個(gè)頁面涉及到的所有零星圖片都包含到一張大圖中去。
二,為什么要使用css精靈圖?
使用css精靈圖主要有兩點(diǎn)好處;
1.讓小圖(小圖標(biāo)),既請求一次大圖,得到所有小圖實(shí)現(xiàn)一次請求,減少對服務(wù)器的請求速度,避免網(wǎng)頁造成延遲。
2.方便對小圖(小圖標(biāo))的管理。
三,如何制作并使用css精靈圖?
主要分為兩部分:
1.使用ps制作精靈圖;
步驟演示: 新建一個(gè)透明的圖層。css新建圖片
圖1使用alt+鼠標(biāo)滾動鍵,放大圖層。 新建參考線;新建參考線
圖2
在實(shí)際測量小圖大致寬高后,就開始建立參考線。比如,我的小圖大致為25px*25px(寬高不超過25px*25px)。所以,我在參考線取向上水平方向建立了3條參考線(25像素、50像素、75像素);垂直方向建立了3條參考線(25像素、50像素、75像素)。
空白畫布
圖3依次放入各個(gè)小圖(小圖標(biāo));

放入圖片
 圖4
2.使用css和html代碼顯示精靈圖的各個(gè)小圖。
步驟演示:
2-1.引入圖片;(紅色框內(nèi)為主要代碼)
css代碼
圖5
代碼如下:
.jlt {
background-image: url(../images/jlt.png);
background-repeat: no-repeat;
display: inline-block;
width: 25px;
height: 25px;
vertical-align: bottom;
margin-bottom: -5px;
}
2-2.利用css定位,定位各個(gè)小圖。
代碼如下:
.f1 {
background-position: 0px 0px;
}
.f2 {
background-position: -25px 0px;
}
.f3 {
background-position: 0px -25px;
}
2-3.使用html代碼,使小圖顯示。
代碼如下:


3-3.最終效果展示。
網(wǎng)站項(xiàng)目
圖6

四,總結(jié):

css制作總結(jié)
圖7
由圖7得,根據(jù)各個(gè)比較,最后得出:當(dāng)背景定位為0px 0px時(shí);得到原點(diǎn)。改變數(shù)字就得到各個(gè)軸上的圖片;
當(dāng)?shù)谝粋€(gè)數(shù)字是正數(shù)時(shí),為空(以原點(diǎn)為起始點(diǎn),向左移動);當(dāng)我第一個(gè)數(shù)字為負(fù)數(shù)時(shí)(以起點(diǎn)為原點(diǎn),向右移動)。
當(dāng)?shù)诙€(gè)數(shù)字為正數(shù)時(shí),為空(以原點(diǎn)為起始點(diǎn),向左移動);當(dāng)我第二個(gè)數(shù)字為負(fù)數(shù)時(shí)(以起點(diǎn)為原點(diǎn),向下移動)。
因此,第一個(gè)數(shù)字控制左右(正為左,負(fù)為右);第二個(gè)數(shù)字控制上下(正為上,負(fù)為下);原點(diǎn)的上方和左方都沒有圖標(biāo),所以為空。
Ps:如果我要得到白色襪子的話,數(shù)字為(-50px 0px);如果我要黃色襪子的話,數(shù)字為(-50px -25px)。
溫馨提示:使用行內(nèi)元素是無法顯示圖片的。
做賬:

網(wǎng)站標(biāo)題:如何制作并使用css精靈圖/csssprites?
文章網(wǎng)址:http://m.rwnh.cn/news1/240101.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供域名注冊、標(biāo)簽優(yōu)化、Google網(wǎng)站內(nèi)鏈、電子商務(wù)、品牌網(wǎng)站建設(shè)

廣告

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

商城網(wǎng)站建設(shè)
沽源县| 阿拉善右旗| 景谷| 永靖县| 镇赉县| 高尔夫| 阳东县| 略阳县| 郑州市| 凭祥市| 和龙市| 炎陵县| 家居| 清水河县| 郧西县| 邛崃市| 兴化市| 清水县| 南通市| 舒城县| 任丘市| 昌都县| 永州市| 普陀区| 勐海县| 新田县| 淮阳县| 海口市| 克东县| 呼伦贝尔市| 济源市| 噶尔县| 宣恩县| 河曲县| 大城县| 连平县| 鸡泽县| 酉阳| 彩票| 泸西县| 新蔡县|