雪碧主题的文章列表，还有雪碧的技术要点_第1页

利用雪碧图，完成兔子走路过渡/动画效果

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><style>/*像这种，利用雪碧图制作的动画效果叫做精灵动画*/.box1...

代码星球 ·2021-01-17

CSS 雪碧图

作用图片属于网页中的外部资源，外部资源都需要浏览器单独发送请求加载，雪碧图的使用步骤： 1.先确定要使用的图标 &nbs...

代码星球 ·2021-01-16

compass做雪碧图

由于最近没什么时间好好写博文，我把用sass做雪碧图的关键点贴出来方便自己记忆:config.rb注释#Setthistotherootofyourprojectwhendeployed:#配置服务器路径http_path="http//:www.baidu.com/"#配置csssassimagesjavascrip...

代码星球 ·2020-07-24

雪碧图background-position的rem用法

background的雪碧图配合rem就正常写即可，要加上background-size,大小为sprites的原图尺寸，宽高为一帧的尺寸。例如：.player{width:2.32rem;/*一帧图的大小*/height:2.8133rem;display:inline-block;position:absolute...

代码星球 ·2020-06-29

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

　　前面已经介绍过，描述性图片最终要合并为雪碧图。本文是photoshop巧用系列第五篇——雪碧图定义　　css雪碧图(sprite)是一种网页图片应用处理方式，它允许将一个页面涉及到的所有零星图片都包含到一张大图中。使用雪碧图的处理方式可以实现两个优点：　　　　【1】减少http请...

代码星球 ·2020-05-24

css之background-position属性实现雪碧图

什么是雪碧图雪碧图就是CSSSprite，也有人叫它CSS精灵，是一种CSS图像合并技术，就是把多张小图标合并到一张图片上，然后用css的background-position来显示需要显示的部分。为什么要用雪碧图可以减少加载网页图片时对服务器的请求次数，提高页面的加载速度，解决IE6鼠标滑过时出现闪白的现象。用雪碧图...

代码星球 ·2020-05-23

photoshop 雪碧图制作

图片拖入后一般取同行同列最高最宽自动在所选目录生成打开:修改四次请求有点多啊.打开（下载）csssprite自动生成坐标地址.不过我们要把它排远一点 OK了。我们生成以后:坐标地址就可以直接用了，不用一个像素的移了因为生成时，也会产生文件...

IT猿 ·2020-03-28

css雪碧图（css splite）

将很多小的背景图片放在一起，可以减少http请求. 这些图片通常是一类的。所以使用雪碧图. 雪碧图即为: 测试一下减少了多长时间0=0...

IT猿 ·2020-03-28