css sprite

为什么使用css sprite？

网页上的非常多静态小图片在载入时须要大量http请求，添加了响应时间。（哈哈。雅虎34条优化法则的第一条啊）

css的background-position:x,y;

利用分层实现

1、设置块状元素大小

2、改变背景的位置

3、实现(非常多小图组成的大图)相应位置小图的出现

自己主动生成css sprite的工具：cssgaga

css sprite的实现的更多相关文章

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

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

  2. css sprite 调整大张图片中小图标的大小

    直接说解决方法: 假设一张拼合好的大图大小是:900 x 1000 px (如上图) 现在想取图中左上角的河马图标,并缩小图标的大小. 正常取图: .sprite { background: url( ...

  3. HTML CSS SPRITE 工具

    推荐一个CSS SPRITE工具 网盘分享:http://pan.baidu.com/s/1sjx7cZV

  4. CSS Sprite雪碧图应用

    在写网页过程中,会遇到这种需要使用多个小图标: 如上图中的「女装」文字左边的图标.容易想到的解决方法是为每张图片加入<img>标签,但这样做会增加HTTP请求数量,影响网站加载速度.比这更 ...

  5. CSS雪碧，即CSS Sprite 简单的例子

    CSS Sprite生成工具 http://pan.baidu.com/s/1gdGQwiJ 工具可将多幅图片整合一张,并生成CSS. HTML代码 <style> .img{backgr ...

  6. 使用compass自动合并css雪碧图(css sprite)

    本文转载自: 使用compass自动合并css雪碧图(css sprite)

  7. CSS Sprite 图标

    HTML <body> <!-- ul.sprite>li*5>s.s-icon+a{CSS Sprite} --> <!-- 以上是Sublime Text ...

  8. CSS Sprite 雪碧图制作

    CSS Sprite 雪碧图,简单来说就是: 为了提高网页的性能,减少加载次数,将一些不会经常随网站内容变化的小图标,集中放在一张大图上,将该图应作为background-image 嵌入页面中,在需 ...

  9. CSS Sprite的优缺点分析

    目前大多数的开发人员对这个技术都有相当地掌握,也有很多关于它的教程和文章.几乎所有的文章中都宣称设计师和开发人员都应该使用 CSS sprite 来减少 HTTP 请求数,并且节省一些流量.这个技术被 ...

  10. CSS Sprite雪碧图

    为了减少http请求数量,加速网页内容显示,很多网站的导航栏图标.登录框图片等,使用的并不是<image>标签,而是CSS Sprite雪碧图. 两个小例子: 淘宝首页的侧栏图 代码 &l ...

随机推荐

  1. 从默认析构函数学习c++,new,delete,内存泄漏，野指针

    默认析构函数:当系统没有显式定义析构函数,编译器同样会为对象定义一个默认析构函数,默认的析构函数只能释放普通数据成员所占用的空间,无法通过释放通过new和malloc进行申请的空间,因此避免内存泄漏, ...

  2. 修改数组数据头和尾push()、pop()和unshift()、shift()

    1.push().pop()和unshift().shift() 这两组同为对数组的操作,并且会改变数组的本身的长度及内容. 不同的是 push().pop() 是从数组的尾部进行增减,unshift ...

  3. GoogleMap 获取自己的数字证书API key的步骤

    http://dreamylights.blog.51cto.com/1163218/1360759 1. 进入到Google APIs Console页面 https://code.google.c ...

  4. （转载）Activity-数据状态的保存

    由于手机是便捷式移动设备,掌握在用户的手中,它的展示方向我们是无法预知的,具有不确定性.平时我们拿着手机多数为竖屏,但有时候我们感觉累了也会躺着去使用手机,那么这时手机屏幕的展示方向可能已经被用户切换 ...

  5. android随手记

    Linearlayout: gravity:本元素中所有子元素的重力方向     layout_gravity:本元素对于父元素的重力方向 自定义权限:http://www.cnblogs.com/i ...

  6. DataTable和DataRow和DataColumn ~~~~~~~~~~[][]

    DataSet.Tables[0].Rows[0][1]表示DataSet中第一张表(因为Tables[0]就是第一张表的意思)中第一行(Rows[0][]) 第二列(Rows[][1])的数据. D ...

  7. 单元测试工具 unitils

    Unitils模块组件 Unitils通过模块化的方式来组织各个功能模块,采用类似于Spring的模块划分方式,如unitils-core.unitils-database.unitils-mock等 ...

  8. ubuntu区域语言(locale)设置（切换为中文）

    第一步:编辑文件 代码:sudo gedit  /var/lib/locales/supported.d/local (这个文件是所有已经激活的区域语言的列表) 写入相关内容,比如写入如下内容: zh ...

  9. kernel 3.10内核源码分析--hung task机制

    kernel 3.10内核源码分析--hung task机制 一.相关知识: 长期以来,处于D状态(TASK_UNINTERRUPTIBLE状态)的进程 都是让人比较烦恼的问题,处于D状态的进程不能接 ...

  10. python中的网页标签等字符处理

    # -*- coding: utf-8-*- import re ##过滤HTML中的标签 #将HTML中标签等信息去掉 #@param htmlstr HTML字符串. def filter_tag ...