雪碧图的制作

雪碧图，又称精灵图，利用其定位来确定我们需要采用的图片。

使用方面，大大的减少了请求次数，提高了效率。

合并雪碧图，需要将所有的图片的宽高设置成一样的。然后利用其在X、Y轴的位置来确定图片。

举例说明：

这个是一张高宽都一样的图片

利用定位（注意雪碧图是使用它的背景定位做的）

具体操作步骤如下：

在css样式中：

然后出现的我们需要的图片：

时间： 2024-08-02 06:59:43

雪碧图的制作的相关文章

css 雪碧图的制作

很多网站其实都用了雪碧图,确实方便了制作,以前以为这种小图标,都是一个一个图片呢(笑) 效果图如下: 代码如下: <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> h3,ul {margin: 0;padding: 0;} ul{list-style: none;} li h3{font-size: 14

CSS Sprite 雪碧图,简单来说就是: 为了提高网页的性能,减少加载次数,将一些不会经常随网站内容变化的小图标,集中放在一张大图上,将该图应作为background-image 嵌入页面中,在需要相关图标时,根据background-position设置坐标值,达到目的. 一个例子,可以复制然后看一下效果: HTML代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo

前端工程师技能之photoshop巧用系列第五篇——雪碧图

显示目录目录 [1]定义 [2]应用场景 [3]合并[4]实现[5]维护前面的话前面已经介绍过,描述性图片最终要合并为雪碧图.本文是photoshop巧用系列第五篇--雪碧图定义 css雪碧图(sprite)是一种网页图片应用处理方式,它允许将一个页面涉及到的所有零星图片都包含到一张大图中.使用雪碧图的处理方式可以实现两个优点: [1]减少http请求次数 [2]减少图片大小,提升网页加载速度 (多张图片加载速度小于拼合成的图片的加载速度) 凡事都不完美,实现优点的同时也带来了缺点,即提

图标字体 VS 雪碧图——图标字体应用实践

本文介绍使用图标字体和SVG取代雪碧图的方法.雪碧图是很多网站经常用到的一种技术,但是它有缺点:高清屏会模糊.无法动态变化如hover时候反色.而使用图标字体可以完美解决上述问题,同时具备兼容性好,生成的文件小等优点. 雪碧图雪碧图实例:淘宝PC端将多张小图放至一张大图使用的时候,通过background-position调整显示的位置,如下图所示: 雪碧图的使用方法使用雪碧图唯一的优点,可以说就是减少浏览器的请求次数.因为浏览器同一时间能够加载的资源数是一定的,IE 8是6个,Chro

使用Compass制作雪碧图

遇见好的文章,笔者也会转载.但是正所谓好记性不如烂笔头,单纯的拿来主义也不如自己的亲自实践.所以每次需要转载的文章,我都会自己敲一遍,中间加入一些自己的思考. 这篇文章转载自:http://www.hongkiat.com/blog/compass-image-sprite/ 作者Thoriq Firdaus 译者zEx 前端性能优化,一直是前端开发中非常重要的一环,而其中静态资源特别是图片的优化,又占据了很大的比重.图片优化的方法有很多种,其中非常基本而常用的,就是雪碧图. CSS雪碧图就是将

制作雪碧图代码示例

制作雪碧图的辅助工具是ps,先要测出所要的图片的宽高写到代码中去,给它预留位置大小,然后测出所要点击后的图标移动位置的宽高写入代码. 代码示例:①.选择器名字{ width:xxPX (这里可以是正负数,代表的是向左还是向右移动) height:xxPX background:图片位置 xxPX xxPX(这里指所要移动的像素) } ②. 选择器:hover{ (这里代码意思

网站性能优化之雪碧图制作

雪碧图制作及使用制作目的:由于网站上有需要小的icon且每次加载的时候都会有许多类似的请求,影响了网站的性能.所以将小图标合并成一张雪碧图,从而减少图片的请求数,优化网站性能. 制作方法: 1.刀耕火种法利用photoshop把一张张小图合成一张雪碧图(工作效率太低不建议使用): 2.机械生产法: 利用在线生成工具生成雪碧图: 工具地址:http://csssprites.com/:http://alloyteam.github.io/gopng/: 将要合成的图片添加到工具里已经合成,然后

Photoshop制作雪碧图技巧

雪碧图,就是将网页制作中使用的多个小图片合并成一个图片,使用css技术将这张合成的图片应用在网页不同的地方,雪碧图可以减少网页加载时的http请求数,优化网页性能. 步骤: 1.使用Photoshop新建一张背景透明的图片 2.将小图片复制到此图片中,排列好每个图像的位置,图片幅面不够可以用画布大小调整大小 3.按照所有小图片的范围裁剪图片,存为透明背景的png图片原文地址:https://www.cnblogs.com/jyue/p/10504005.html

compass制作sprite雪碧图

1.安装compass.(需要先安装ruby) 命令行:gem install compass 2.新建一个compass 项目命令行:compass create myproject 3.在myproject中新建一个images文件夹,将需要转换的图片放入images新建的share文件中并在scss文件中写入: @import "compass/utilities/sprites"; @import "share/*.png"; @include all-