雪碧图-初识

简介: 雪碧图-初识

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

什么是雪碧图?

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

作用是什么?

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

应用过程?

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

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

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


相关文章
|
前端开发 UED
你需要知道的 CSS 技巧:图片篇2 你的图片裂开了怎么办?
你需要知道的 CSS 技巧:图片篇2 你的图片裂开了怎么办?
703 0
|
6月前
|
前端开发 UED
雪碧图的实际应用
雪碧图的实际应用
121 0
|
前端开发
css图片在区域里缩放
css图片在区域里缩放
|
前端开发
使用css让图片透明渐变
今天接到一个这样的需求,将一张图片作为一个背景,然后四周透明渐变,很简单是吧,只要这个背景图片是png的,然后图片四周半透明就ok了,然而给到我手里的是jpg格式的,怎么办?
338 0
使用css让图片透明渐变
|
XML 前端开发 算法
CSS 基于文字的图片马赛克你见过吗
CSS 基于文字的图片马赛克你见过吗
214 0
|
前端开发 容器
图片三像素问题如何解决css
图片三像素问题如何解决css
|
前端开发 容器
css——图片缩放,拉伸,变形的解决办法
css——图片缩放,拉伸,变形的解决办法
661 0
|
前端开发
好看的css预加载旋转动画 与 流光字体
好看的css预加载旋转动画 与 流光字体
好看的css预加载旋转动画 与 流光字体
|
前端开发 JavaScript
使用CSS实现 图片帧动画 与 曲线运动
使用CSS实现 图片帧动画 与 曲线运动
604 0
使用CSS实现 图片帧动画 与 曲线运动