2023-02-27 分類: 網站建設
圖4
2.使用css和html代碼顯示精靈圖的各個小圖。
步驟演示:
2-1.引入圖片;(紅色框內為主要代碼)
圖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定位,定位各個小圖。
代碼如下:
.f1 {
background-position: 0px 0px;
}
.f2 {
background-position: -25px 0px;
}
.f3 {
background-position: 0px -25px;
}
2-3.使用html代碼,使小圖顯示。
代碼如下:
3-3.最終效果展示。
圖6
四,總結:
網站標題:如何制作并使用css精靈圖/csssprites?
文章網址:http://m.newbst.com/news1/240101.html
成都網站建設公司_創新互聯,為您提供域名注冊、標簽優化、Google、網站內鏈、電子商務、品牌網站建設
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯
猜你還喜歡下面的內容