2023.2.2
精灵技术
css精灵:雪碧图
css精灵英文叫法“CSS sprites”,通常被解释为“CSS 图像拼合”或“CSS 贴图定位”,其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS“background image”,“background-repeat”,“background-position”的组合进行背景定位,background-position精确的定位出背景图片的位置。
实现步骤:
- 限定容器的大小
- 图片拼合
- 背景定位
优点:
1、减少网页http的请求,从而大大提高页面的性能
2、图片命名上的困扰
- 更换风格方便
缺点:
- 必须要限定容器的大小
- 需要计算位置
使用场景:
适用于一般小图片(小图标、小背景),不适合大背景大布局的图片
(精灵图制作)
https://www.toptal.com/developers/css/sprite-generator/
单行文本溢出显示省略号
white-space: nowrap;/* 强制不换行 */
overflow: hidden;/* 溢出隐藏 */
text-overflow: ellipsis;/* 溢出显示省略号 */