css sprite

俗称：精灵图，雪碧图，指将整个页面不同的图片or图标合并在一张图上；
优点：使用CSS Sprite 可以减少网络请求，提高网页加载性能，不会出现网页上端加载完毕下面还在加载中这一问题

缺点：如果后期更改其中某一图标，且其像素大小发生改变，需要重新对所有图标进行定位

精灵图制作：

photoshop选择透明图层，将需要的图标和图片放入

测试用图：

​​​

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title></title>

         <style type="text/css">

             #box{

                 margin: 50px;;

             }

             #box a{

                 display: block;

                 width: 74px;

                 height: 20px;

                 border: 1px solid #ccc;

                 color: black;

                 font-size: 12px;

                 text-decoration: none;

                 text-align: center;

                 border-top: none;

                 padding-top: 54px;

                 background-image: url(icon.png);

             }

             #box #zone{

                 border-top:1px solid #CCCCCC;

                 background-position: -17px 4px;

                 background-repeat: no-repeat;

             }

             #box #zone:hover{

                 background-position: -17px -98px;

             }

             #box #mail{

                 background-position: -12px -186px;

                 background-repeat: no-repeat;

             }

             #box #mail:hover{

                 background-position: -12px -286px;

             }

         </style>

     </head>

     <body>

         <div id="box">

             <a href="#" id="zone">空间</a>

             <a href="#" id="mail">邮箱</a>

         </div>

     </body>

 </html>

web前端sprite，精灵图，雪碧图的更多相关文章

  1. css sprite，css雪碧图生成工具V3.0更新

    V3.0主要改进 1.增加了单独添加单张图片以及删除单张图片的功能 2.增加了生成.sprite文件用以保存雪碧图信息 3.增加了打开.sprite文件功能 什么是css sprite CSS spr ...

  2. 前端优化：css雪碧图实践应用详解

    一 为什么需要使用雪碧图 二CSS雪碧图原理及应用 前端是接近用户体验的一个项目组成部分,合适的优化能够大大减少网页响应时间,合理的资源加载自然成为了工作中的要务,现在就结合实例讲解到底什么是css雪 ...

  3. CSS Sprite、CSS雪碧图应用实例

    CSS Sprites技术被国内一些人称为CSS雪碧图,其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”, ...

  4. 方便前端使用的SVG雪碧图

    更多代码详情:github.crmeb.net/u/LXT 简介 由于SVG自身的矢量性质,不管在什么情况下,图标都很清晰,可以适应不同尺寸大小和不同分辨率.不用担心模糊和锯齿.同时还能更改图标的填充 ...

  5. css 雪碧图 及jquery定位代码

    无意间发现了一个很神奇的事情,就是 鼠标悬停在图片上方会切换,起初以为图标是单独插入的.但发现居然是一张完整的图片. 一万只草泥马在心中奔腾.这是怎么实现的? 后来询问得知,这是css精灵技术(spr ...

  6. CSS Spritec下载,精灵图，雪碧图，初探之原理、使用

    CSS Spritec下载,精灵图,雪碧图,初探之原理.使用 关于CSS Sprite CSSSprites在国内很多人叫css精灵雪碧图,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零 ...

  7. CSS入门（背景各种属性的详解、垂直居中和过渡效果的详解、渐变效果的简单讲解、雪碧图和精灵图）

    一.各种背景属性 1.background-image 属性为元素设置背景图像. 元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距. 默认地,背景图像位于元素的左上角,并在水平和垂直方 ...

  8. 移动端适配之sprite雪碧图背景定位

    移动端适配一般我会使用rem进行适配,大致操作就是按照一定尺寸设计稿进行制作,最后将所有px值转换为rem,但是一些手机背景精灵图(cssSprite)就会出现一些误差(1px左右),如果公司要求不高 ...

  9. CSS Sprite雪碧图的应用

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

随机推荐

  1. 1051 复数乘法 (15 分)C语言

    复数可以写成 (A+Bi) 的常规形式,其中 A 是实部,B 是虚部,i 是虚数单位,满足 i^​2=−1:也可以写成极坐标下的指数形式 (R×e​(Pi)​ ),其中 R 是复数模,P 是辐角,i ...

  2. 物理ceph集群+K8s

    前提条件 在Ceph为k8s创建一个pool ceph osd pool create k8s 128 创建admin用户 ceph auth get-or-create client.admin m ...

  3. Linux学习_菜鸟教程_1

    Linux系统启动过程:内核的引导 .运行init.系统初始化.建立终端.用户登录系统 内核引导:计算机开机,然后BIOS开机自检,按照BIOS中设置的启动设备(通常是硬盘)来启动. 操作系统接管硬件 ...

  4. fastjson使用详解

    目录 二.fastjson使用 三.fastjson 常用 API 四.fastjson使用演示 测试类准备 1.java类转换为json字符串 2.json字符串转为java类 五.fastjson ...

  5. JavaSelenium 页面常用基本操作语法

    元素定位                 findElement() 方法返回一个元素, 如果没有找到,会抛出一个异常 NoElementFindException()              fi ...

  6. Vmware下Ubuntu 14.04静态IP地址的设置方法

    一.环境 宿主机 Win 8.1 虚拟机工具 VMware 10.0 虚拟主机系统 Ubuntu 14.04   二.说明 这里需要注意的是:VMware对于VMnet8采用如下规则(192.168. ...

  7. Java开源工作流引擎Jflow表单方案系列讲解一

    关键字: 驰骋工作流程快速开发平台 工作流程管理系统 工作流引擎 asp.net工作流引擎 java工作流引擎. 开发者表单  拖拽式表单  表单方案介绍 适配数据库: oralce,mysql,sq ...

  8. ipynb 文件转 py

    前言 好多机器学习的文件都是ipynb的格式,如果想用其他编辑器的需要转为py的格式 命令: jupyter nbconvert --to script *.ipynb jupyter: pip3 i ...

  9. CF - 一直交换元素的规律

    Dima is a beginner programmer. During his working process, he regularly has to repeat the following ...

  10. 自己动手搭环境—unit 1、Struts2环境搭建

    1.web.xml中增加Struts2配置 <filter> <filter-name>struts2</filter-name> <filter-class ...