css sprite 按钮,CSS Sprites (CSS 精灵) 技术

CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。

在网页访问中，客户端每需要访问一张图片都会向服务器发送请求，所以，访问的图片数量越多，请求次数也就越多，造成延迟的可能性也就越大。

所以，CSS Sprites技术加速的关键，并不是降低质量，而是减少个数，当然随之而来的增加内存消耗，CSS Sprites图片繁琐的合成等缺点在网站性能的提升前，也就不足为道了。

CSS Sprites的使用：

.bg_sprite{background-image:url(/整图地址); background-repeat:no-repeat}

#ico1 {width:容器宽度;height:容器高度;background-position:X坐标 Y坐标}

#ico2 {width:容器宽度;height:容器高度;background-position:X坐标 Y坐标}

#ico3 {width:容器宽度;height:容器高度;background-position:X坐标 Y坐标}

.nav {width:容器宽度;height:容器高度;background-position:X坐标 Y坐标}

当然也有简写方法：

#ico1 {width:容器宽度;height:容器高度;background:url(/整图地址) no-repeat X坐标 Y坐标;}

其中，X坐标和Y坐标表示原图相对于ico1框左上角点的偏移量，即 坐标 0 0表示背景图和ico1框的左上角点重合

例子：

图片"bg_sprite.png"

代码

1 ico {width: 16px;height:16px;background: url("bg_sprite.png") no-repeat 0 -234px;}

效果为：

CSS Sprites (CSS图像拼合技术)教程工具

什么是CSS Sprites? “Sprite”(精灵)这个词在计算机图形学中有它独特的定义,由于游戏.视频等画质越来越高,必须有一种技术可以智能的处理材质和贴图,并且要 同时保持画面流畅.“Spri ...

CSS Sprites (css精灵)

CSS Sprites CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不 ...

CSS sprites(css 精灵):将小图标整合到一张图片上

一.什么是css sprites css sprites直译过来就是CSS精灵.通常被解释为“CSS图像拼合”或“CSS贴图定位”.其实就是通过将多个图片融合到一张图里面,然后通过CSS backgr ...

CSS Sprites(CSS图像拼合技术)教程、工具集合

本集合是有一位国外设计师收集整合,并由 oncoding翻译成中文的,感谢他们的辛苦贡献.CSS Sprites技术在国外并不是什么新技术,只不过近两年(尤其08年开始)中国开始流行这个词,大家也开始 ...

【CSS】CSS Sprites (CSS 精灵) 技术

CSS Sprites CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不 ...

css sprites(精灵图)如何使用？

CSS Sprites是一种性能优化技术,一种网页图片应用处理方式:将多个图像组合成单个图像文件以在网站上使用的方法,以提高性能:也被称为css 精灵图. 网页通常包含多个图像.这些包括图标,按钮,徽 ...

CSS Sprites(CSS精灵) 的优缺点

CSS Sprites 的优点:     1.减少图片的字节     2.减少了网页的http请求,从而大大的提高了页面的性能     3.解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命 ...

css学习_css精灵技术、字体图标

1.精灵技术产生的背景(减少向服务器请求的次数,减小服务器压力) 2.精灵技术的本质(小的背景图集中在一张大图上) 3.精灵技术的使用 案例1: 案例2: 注意:产品类的图片一般不是用背景,而是用im ...

css sprites 图片精灵自动生成 插件

grunt-spritesmith https://www.npmjs.com/package/grunt-spritesmith

随机推荐

由项目中一个hash2int函数引发的思考

hash2int /** * 计算一个字符串的md5折算成int返回 * @param type $str * @return type */ function hash2int($str) { $m ...

#error作用

指令 用途 # 空指令,无任何效果 #include 包含一个源代码文件 #define 定义宏 #undef 取消已定义的宏 #if 如果给定条件为真,则编译下面代码 #ifdef 如果宏已经定义, ...

数字电路-异同步 复位 线与 oc门

1.同步电路和异步电路的区别是什么? 异步电路:主要是组合逻辑电路,用于产生地址译码器.FIFO或RAM的读写控制信号脉冲,但它同时也用在时序电路中,此时它没有统一的时钟,状态变化的时刻是不稳定的,通 ...

poj 2299 树状数组求逆序对数+离散化

Ultra-QuickSort Time Limit: 7000MS   Memory Limit: 65536K Total Submissions: 54883   Accepted: 20184 ...

VTK序列图像的读取[转][改]

医学图像处理的应用程序中,经常会碰到读取一个序列图像的操作.比如CT.MR等所成的图像都是一个切面一个切面地存储的,医学图像处理程序要处理这些数据,第一步当然是把这些数据从磁盘等外部存储介质中导入内存 ...

PHP设计模式笔记八：原型模式 -- Rango韩老师 http://www.imooc.com/learn/236

原型模式 概述: 1.与工厂模式作用类似,都是用来创建对象 2.与工厂模式的实现不同,原型模式是先创建好一个原型对象,然后通过clone原型对象来创建新的对象,这样就免去了类创建时重复的初始化操作 3 ...

ODbgScript 2.01帮助文档

-------------------------------ODbgScript original pluginhttp://github.com/odbgscript--------------- ...

day13--开发堡垒机

本节内容 项目实战:运维堡垒机开发      商业:     前景介绍        https://www.cnblogs.com/alex3714/articles/ ...

Vue2学习笔记:过渡效果css

过渡效果 Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加 entering/leaving 过渡

POJ 2239

#include #include #define MAXN 305 using namespace std; int _m[MAXN ...