- CSSSprites在国内很多人叫css精灵,是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言,不高于200KB的单张图片的所需载入时间基本是差不多的,所以无需顾忌这个问题。加速的关键,不是降低重量,而是减少个数。传统切图讲究精细,图片规格越小越好,重量越小越好,其实规格大小无所谓,计算机统一都按byte计算。客户端每显示一张图片都会向服务器发送请求。所以,图片越多请求次数越多,造成延迟的可能性也就越大。
- CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字能精确的定位出背景图片的位置。
- 下面我就详细的讲解下他的使用技巧,包你现在不懂的童鞋会有个清楚的全新了解,虽然目前有这样的工具,但是还是要先清楚他的原理,技巧性的来做也会很快速的完成定位,下面我分享加个案例。
- 首先跟大家说明一点,由于需要定位的背景都是合并在一张图的,所以都是一刀切的,要么是X轴坐标一致要么是Y轴坐标一致,也就有了我下面要讲述的2种类型了。
- 1。横向定位坐标
- 横向定位坐标意思就是Y轴坐标固定,它的特点就是每个图标的高度是一致的,通过改变x坐标的位置来改变背景。只需测量每个图标的宽度就可以知道x轴的坐标了。如果你还不知道这个规律,下面我就讲解给你听吧,下面拿我做的2个案例来说事。
- 效果图:
- <a href="http://m">http://m1.img.libdd.com/farm5/2012/0828/08/1F97A4B232E0D41ECD68D52EBE037A9555BBCB189977_500_22.jpg
- 实际背景图:
- <a href="http://m">http://m1.img.libdd.com/farm5/2012/0828/08/A2E67666F292DF6649411ED2851CEFE87EDCFC5EF698_404_46.JPEG
- 那么具体来讲解怎么来定位,这里是改变X坐标来定位。
- 由于高度都是一样所以Y轴上的坐标都是0或top
- 这里每个图标我是用一个span做背景的,下面具体分析下代码:
- <div class="join c">
- <strong>Join us on:</strong>
- <ul class="c">
- <li><a href="<a >
- ul{margin:0;padding:0;float:left;width:32px;}
- ul li{float:left;list-style-type:none;width:32px;background-image:url(image/bg.jpg);background-repeat:none;margin:10px 0;}
- .f{background-position:0 0;height:32px;}
- .p{background-position:0 -32px;height:20px}/*Y轴坐标等于起始位置的高度 即:-(0+32)*/
- .fr{background-position:0 -52px;height:32px;}/*等于前面元素的Y轴坐标加上前面元素的高度,即:-(32+20) */
- .h{background-position:0 -84px;height:32px;}/*等于前面元素的Y轴坐标加上前面元素的高度*即:-(52+32)*/
- .t{background-position:0 -116px;height:32px;}/*等于前面元素的Y轴坐标加上前面元素的高度,即:-(84+32)*/
- </style>
- </head>
- <body>
- <ul>
- <li class="f"></li>
- <li class="p"></li>
- <li class="fr"></li>
- <li class="h"></li>
- <li class="t"></li>
- </ul>
- </body>
- </html>
- 3.宽度和高度都相等的时候,那是最好不过了,直接做乘法,相信你的数学能力一家过了小学3年级了,Ok,还是来分享下吧。
- 1.宽度高度想等的情况下等位X轴坐标,这种情况通常都出现在一组按钮下,鼠标滑过和点击时候的背景改变。这种情况我也总结出来了,有公式:
- X轴坐标=-n(起始位置+宽度).
- 其中n值从0开始。即所有的起始位置的坐标都是0,0开始起。下面依次类推。
- 比如你现在所要定位的元素是第3个,假设我们这里的图标的宽度为30px.那么他的X轴坐标就等于。x=-3*(0+30px);
- Y轴的坐标=-n(起始位置+高度)
- 比如你现在所要定位的图标为第6个位置,假设这里的高度也是32px;那么他的Y轴坐标就是
- Y=-6(0+32px)=-192px. 哈哈,当然有许多的工具,那个叫什么gaga的工具虽然挺好,但是我没用过,我一直都用我自己的这套,我自己在实践中感觉挺方便的,所要分享下。
- //该片段来自于http://www.codesnippet.cn/detail/090420132781.html
来源: http://www.codesnippet.cn/detail/090420132781.html