图片精灵
程序员文章站
2024-03-16 21:12:10
...
什么是精灵图:
css精灵(CSS sprites),是一种网页图片应用处理技术。主要是指将网页中需要的零星的小图片集成到一个大的图片中
应用的原因:
1.减少对浏览器的请求次数,避免网页的延迟
2.方便小图标的统一管理
精灵图的制作:
1.软件:ps
2.制作方法:
新建透明图层
添加参考线将画布划分,将小图标放入划分好的格子中
精灵图的使用: css精灵图需要配合背景的图片和背景定位
1.引入精灵图
.ui{
background-image:url(baijingting.png);
width:80px;
height:80px;
background-repeat:no-repeat;
display:inline-block;
}
2.精确定位需要显示的小图标坐标
.sprite{
background-position:80px 0px
}
.sprite1{
background-position:160px 160px
}
推荐阅读
-
图片精灵
-
MATLAB:批量对图片进行裁剪
-
利用JNA实现透明(图片透明,自定义不规则多边形透明)
-
uniapp:一个多边形图片裁剪插件
-
Pygame飞机大战为什么飞机与敌机碰撞后不再有图片动态切换效果
-
three.js 笔记 --- 渲染图片 和 渲染obj,mtl文件
-
将图片转成二进制并生成Base64编码字符串,再将二进制转换成各种图片 博客分类: javaStringio javaioBase64Binarybytearrayinputstream
-
GitHub 图片加载不出来怎么办
-
Cocos2dx 3.1.1 学习笔记整理(2):创建场景与载入图片
-
cocos2d js 怎样动态载入外部图片