文章目錄
- 一、精靈圖
- 1.什么是精靈圖？
- 2.為什么要用精靈圖
- （1）減少服務器的訪問量，加快加載速度
- （2）方便管理這些背景圖圖片
- 3.如何使用
- 4.演示
- 二、字體圖示
- 1.常用的字體圖表網站
- 2.如何引入
- 總結
一、精靈圖
1.什么是精靈圖？
精靈圖是一種網頁圖片的應用技術，主要針對背景圖片使用，把多個小背景圖片合成一個大的圖片
2.為什么要用精靈圖
（1）減少服務器的訪問量，加快加載速度
（2）方便管理這些背景圖圖片
3.如何使用
1.用Macromedia Fireworks軟體加載
2.用切片工具 查看所需要圖示的x和y軸的位置
3.使用background-position寫上x和y坐標
注：一般情況下往左和往上是負值
4.演示
例：提取圖片中的x字母
代碼如圖：
<style>
span {
display: inline-block;
}
.x {
width: 109px;
height: 121px;
background: url(abcd.jpg) -254px -548px;
}
</style>
</head>
<body>
<span class="x"></span>
</body>
效果圖：
二、字體圖示
1.常用的字體圖表網站
1.icomoon字庫 網址：https://icomoon.io/
2.阿里iconfont字庫 網址：https://www.iconfont.cn/
2.如何引入
1.把fonts檔案夾放入根目錄
2.字體宣告
3.引入對應圖示
4.指定相應字體樣式
總結
感謝大家的觀看
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/304360.html
標籤：其他
上一篇：The 2021 ICPC Asia Regionals Online Contest (II)
下一篇：國慶福利“CSS定位大禮包”