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. C++简单项目--贪吃蛇

    在800*600的地图上,蛇的初始长度为3节,用数组记录每一节的位置(每个正方形左上角的坐标),每一节为长度为10的正方形,初始方向向右.随机生成30个障碍物的的位置,随机生成食物的位置.吃到食物之后 ...

  2. 「模拟赛 2018-11-02」T3 老大 解题报告

    老大 题目描述 因为 OB 今年拿下 4 块金牌,学校赞助扩建劳模办公室为劳模办公室群,为了体现 OI 的特色,办公室群被设计成了树形(n 个点 n − 1 条边的无向连通图),由于新建的办公室太大以 ...

  3. Django进阶一

    目录 表关系创建 django请求生命周期流程 路由层 无名分组 有名分组 反向解析 路由分发 名称空间 虚拟环境 django版本区别 伪静态 视图层 三板斧 JsonResponse前后端交互数据 ...

  4. Leetcode1296划分数组为连续数字的集合

    解法1: 最暴力的方法,存每个数字出现的次数,排序之后,扫一遍,对于每个数字,看它后面连续的k-1个是否都存在. 耗时:404ms class Solution { public: bool isPo ...

  5. C# 根据链接提取div内容

    安装NuGet包    HtmlAgilityPack var wc = new WebClient(); wc.Encoding = Encoding.GetEncoding("UTF-8 ...

  6. Go Web 编程之 Hello World

    概述 计划写一个讲 Go Web 编程的系列文章.从基于 net/http 包编写 Go Web 程序开始,讲述处理器,请求,响应等基础知识.然后到框架的使用.中间会穿插一些源码的分析.最后做一个实战 ...

  7. Sample Code之Take a screenshot of a SceneView

    周末事情太多了,以后就工作日发布随笔吧.周末的话,看心情,也许也会发~ 今天的实例代码解析是Take a screenshot of a SceneView,也就是获取快照,话不多说,进入正题. 首先 ...

  8. C#调用7z实现文件的压缩与解压

    1.关于7z 首先在这里先介绍一下7z压缩软件,7z是一种主流的 压缩格式,它拥有极高的压缩比.在计算机科学中,7z是一种可以使用多种压缩算法进行数据压缩的档案格式.主要有以下特点: 来源且模块化的组 ...

  9. Spring Boot2 系列教程 (九) | SpringBoot 整合 Mybatis

    前言 如题,今天介绍 SpringBoot 与 Mybatis 的整合以及 Mybatis 的使用,本文通过注解的形式实现. 什么是 Mybatis MyBatis 是支持定制化 SQL.存储过程以及 ...

  10. 基于js的APP多语言处理

    本文出自APICloud官方论坛, 感谢论坛版主哼哼哈兮 的分享.   本期分享一个js的多语言处理插件i18n.js,此插件是基于JQuery.i18n.properties修改而来的. 实现的原理 ...