雪碧图-初识

简介: 雪碧图-初识

在写前端时,听到雪碧图这个概念。因此在网上查了查资料,了解了一番。

什么是雪碧图?

CSS雪碧 即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分。

作用是什么?

雪碧图的应用可以减少网站的HTTP请求数量,提升网站加载性能,对内存和带宽更加友好,提高用户体验度。

应用过程?

1、用ps或compass等工具把小图标和背景图拼起来。

2、在CSS中利用定位来显示需要显示的图片部分。

先简单了解一下。接下来试着做个例子看看效果,体会体会原理。


相关文章
|
4月前
|
前端开发 JavaScript
无缝滚动图片——源码
无缝滚动图片——源码
|
15小时前
|
区块链 Python
8-5|生成一个纯色的ico图片
8-5|生成一个纯色的ico图片
|
2月前
|
PHP 数据安全/隐私保护 计算机视觉
ThinkPHP图片处理之压缩图片大小,图片处理之图片水印(添加平铺文字水印,并设置文字之间的间距和文字的角度)
ThinkPHP图片处理之压缩图片大小,图片处理之图片水印(添加平铺文字水印,并设置文字之间的间距和文字的角度)
39 1
|
4月前
|
前端开发 JavaScript 开发者
雪碧图:图片合并的艺术!
雪碧图:图片合并的艺术!
|
4月前
|
前端开发 UED
雪碧图的实际应用
雪碧图的实际应用
112 0
|
XML 前端开发 算法
CSS 基于文字的图片马赛克你见过吗
CSS 基于文字的图片马赛克你见过吗
208 0
|
前端开发
好看的css预加载旋转动画 与 流光字体
好看的css预加载旋转动画 与 流光字体
好看的css预加载旋转动画 与 流光字体
【图片操作】给图片添加滤镜
现在我们都喜欢给图片添加滤镜,现在很多相机也自带了许多滤镜。我们可以在拍照的时候选择需要的滤镜。但是有时候我们需要给大量图片添加同样的滤镜,这个时候手动添加就非常麻烦了。为了方便,我们可以使用程序来帮我们完成添加滤镜的操作。
237 0
|
前端开发 JavaScript
使用CSS实现 图片帧动画 与 曲线运动
使用CSS实现 图片帧动画 与 曲线运动
567 0
使用CSS实现 图片帧动画 与 曲线运动
html+css实战170-css精灵-背景图的缩放
html+css实战170-css精灵-背景图的缩放
109 0
html+css实战170-css精灵-背景图的缩放