css雪碧图

CSS雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中,从而减少你的网站的HTTP请求数量。该图片使用CSS background和background-position属性渲染,这也就意味着你的标签变得更加复杂了,图片是在CSS中定义,而非<img>标签。

一个简单的例子:

一张图片作出一个按钮的三个状态  

一个链接用CSS做成按钮的样式,我们可以使用同一张图片,完成按钮的三个状态,a:link,a:hover,a:active。

<a class="button" href="#">链接</a>

加入右侧的图片为:200px×65px的三个按钮图拼合而成的图片button.png,从上到下一次为按钮的普通、鼠标滑过、鼠标点击的状态。则可以使用CSS进行定义。

a {

display:block; width:200px; height:65px; line-height:65px; /*定义状态*/

text-indent:-2015px; /*隐藏文字*/

background-image:url(button.png); /*定义背景图片*/

background-position:0 0; /*定义链接的普通状态,此时图像显示的是顶上的部分*/}

a:hover {background-position:0 -66px; /*定义链接的滑过状态,此时显示的为中间部分,向下取负值*/}

a:active {background-position:0 -132px; /*定义链接的普通状态,此时显示的是底部的部分,向下取负值*/}

初学的朋友可以试试效果。

而更多的CSS雪碧,图片更复杂,背景定位更精确。可能会用到大量的数值,如:background:url(nav.png) -180px 24pxno-repeat; 来达到更精确的定位。

时间: 2024-10-06 00:30:52

css雪碧图的相关文章

CSS雪碧图的一个小案列

以前只是听说过雪碧图没用过,然后来了这里做的第一个活儿就涉及到他.因为怕不会用,就用他们原来切的,那个调的费事啊,算那个background-position困难的啊.原因是他们的雪碧图切放在了一起,没有留有空隙,所以,只能用一个废标签去专门放一个图标.现在发现雪碧图还是很有用的,把所有要用的图片放在一起,然后根据定位来调出要用的图片很方便. 随便写了个小demo:http://codepen.io/tianzi77/pen/xGGMBO 参照网站底部鼠标放上去的时候有一个切换效果. 代码也很简

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

css雪碧图又叫css精灵或css sprite,是一种背景图片的拼合技术.使用css雪碧图,能够减少页面的请求数.降低图片占用的字节,以此来达到提升页面访问速度的目的.但是它也有令人诟病的地方,就是拼图和后期维护的成本比较大.也正是因为这一点,导致很多开发者懒于使用css雪碧图. 对于这种耗时.枯燥.重复性的工作,最好的解决方法还是交给工具去处理.本文就介绍下怎样使用compass来自动合并css雪碧图. 安装compass 首先请确认电脑已经安装ruby及sass环境,ruby及sass的安

css 雪碧图 及jquery定位代码

无意间发现了一个很神奇的事情,就是 鼠标悬停在图片上方会切换,起初以为图标是单独插入的.但发现居然是一张完整的图片. 一万只草泥马在心中奔腾.这是怎么实现的? 后来询问得知,这是css精灵技术(sprite) 也叫雪碧图. CSS知识点: background-image backgorund-position 特点: 相对于当个小图标,它节省文件体积和服务请求次数.将所有零碎的网页背景图片整合到一起,这样做可以有效的减少http对图片的请求次数,而不需要加载多次加载零碎的背景图片,所以合理的利

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

什么是css sprite CSS sprite在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了. 为什么要用这个工具 1.加快网页加载速度 浏览器接受的同时请求数是10个,如果图片过多会影响整体的视觉效果,而且对于不稳定的网络带宽,加载起来更是噩梦,所以把图片拼接为一张大图,从而加快加载速度,以及加速页面渲染 2.后期维护简单 该工具可以直接通过选择图片

css 雪碧图的制作

很多网站其实都用了雪碧图,确实方便了制作,以前以为这种小图标,都是一个一个图片呢(笑) 效果图如下: 代码如下: <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> h3,ul {margin: 0;padding: 0;} ul{list-style: none;} li h3{font-size: 14

V4.0到来了,css雪碧图生成工具4.0更新啦

V3.0介绍 http://www.cnblogs.com/wang4517/p/4476758.html V4.0更新内容 V4.0下载地址:http://download.csdn.net/detail/wx247919365/8685489 提示:如果不是win7或者程序运行不起来的话请下载微软的.net framework 3.5运行环境 一.增加客户端版本更新提醒 服务器端版本更新后,客户端如果没有更新要最新版本,会在标题中提示,点击更新按钮出现版本更新的简单介绍 二.删除多余的选择背

CSS雪碧图自动生成软件

http://www.99css.com/1524/ 包含详细的下载地址.下载步骤以及使用教程 亮点:自动合成雪碧图+自动生成雪碧图background-position代码

css 雪碧图

CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问 该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了.对于当前网络流行的速度而言,不高于200KB的单张图片的所需载入时间基本是差不多 的,所以无需 顾忌这个问题. 加速的关键,不是降低重量,而是减少个数.传统切图讲究精细,图片规格越小越好,重量越小越好,其实规格大小无所谓,计算机统一都按byte计算.客户端每显示一张图片都会向服务器发

SmartSprites 智能批量合并 CSS 雪碧图

做前端的稍微有点经验的都知道 可以通过合并小图片 来减少请求数, 最早可能都是通过 fw.ps 等工具来手动合并, 这种方式的缺点就不吐槽了,效率低,可维护性差 等等 .... 一些很厉害的人,往往会开发出很厉害的程序,来解决重复性的劳动, 1.  https://github.com/iazrael/ispriter 2.  http://www.uini.net/?p=870 3.  http://csssprites.org/ 4.  more ... 这些工具,我都稍微了解过,但最后觉得