CSS高级技巧:CSS Sprites

2016-02-19 23:30 5 1 收藏

每个人都希望每天都是开心的,不要因为一些琐事扰乱了心情还,闲暇的时间怎么打发,关注图老师可以让你学习更多的好东西,下面为大家推荐CSS高级技巧:CSS Sprites,赶紧看过来吧!

【 tulaoshi.com - Web开发 】

上一篇CSS教程文章:CSS高级技巧:圆角矩形

CSS Sprites, 利用CSS background-position 进行背景绝对定位, 减少HTTP请求, 加速网页显示, 解决图片载入闪动问题的技巧.

CSS Sprites最适合用来做的, 恩, 比如:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)清单导航的CSS鼠标翻转效果 大量小图标集中的应用 (FckEditor) ...很多很多,多的想不出来了.

实现原理简单地说就是控制容器的大小, 然后利用background-repeat, background-position来对背景图片进行定位. 更可以理解为将网站大量背景图整合到一张大图中的这种行为( 表象上 )

用一个鼠标翻转事件来说明吧:

准备:

   
                                           01.jpg                                                                                               02.jpg

HTML代码:

ul
    lia id="item1" href="#" title="Item 1" /a/li
    lia id="item2" href="#" title="Item 2" /a/li
    lia id="item3" href="#" title="Item 3" /a/li
    lia id="item4" href="#" title="Item 4" /a/li
    lia id="item5" href="#" title="Item 5" /a/li
    lia id="item6" href="#" title="Item 6" /a/li
    lia id="item7" href="#" title="Item 7" /a/li
    lia id="item8" href="#" title="Item 8" /a/li
    lia id="item9" href="#" title="Item 9" /a/li
/ul

CSS代码:

ul { width:300px; height:300px; margin:0px auto; padding:0px; overflow:hidden; background:transparent url(02.jpg)}
li {list-style-type:none; width:100px; height:100px; float:left}
li a { display:block; width:100px; height:100px; text-decoration:none;
background:transparent url(01.jpg) no-repeat 500px 500px; }
a#item1:hover {background-position: 0 0; }
a#item2:hover {background-position: -100px 0;}
a#item3:hover {background-position: -200px 0;}
a#item4:hover {background-position: 0 -100px;}
a#item5:hover {background-position: -100px -100px;}
a#item6:hover {background-position: -200px -100px;}
a#item7:hover {background-position: 0 -200px;}
a#item8:hover {background-position: -100px -200px;}
a#item9:hover {background-position: -200px -200px;}

效果图如下:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

有人要问了, 这有什么用么? 这可以模拟图片热区说明, 地图提示 等等...

Tips:

CSS Sprites需要精确的背景图片定位, 比较让人头疼.

相对于减少了多次HTTP请求的优点, 却增加了一次性一个大的HTTP请求的缺点... 自己权衡吧

下一篇CSS教程文章:CSS高级技巧:图片替换

来源:http://www.tulaoshi.com/n/20160219/1630051.html

延伸阅读
通常被意译为CSS图像拼合或CSS贴图定位。CSS Sprites并不是一门新技术,目前它已经在网页开发中发展得较为成熟,阿里巴巴各子公司的网页中到处都可发现css sprites 的影子。但CSS Sprites并不是什么金科玉律,但在很多情况下,它有着一定的优势,最重要的是它可以减轻服务器的负载,提高网页加载速度。随着Web设计向着精致、巧妙的方向发展,设...
标签: Web开发
论坛上提到这样的问题:css中用一张背景图做页面的技术有什么优势? 简单介绍一下 CSS Sprites 的优点: 当用户往U盘中拷200张图片,会等很久。但是如果弄成一个文件,再拷贝就会快很多。 CSS Sprites 的目的就是通过整合图片,减少对服务器的请求数量,从而加快页面加载速度。 实现方法: 首先将小图片整合到一张大的图片上 然后根...
标签: Web开发
上一篇 CSS教程 文章:CSS高级技巧:图片替换 滑动门(Sliding Doors) 还是决定把滑动门单独提作一种单独的技术. 它是CSS引入的一项用来创造漂亮且实用的界面的新技术, 它使用简单, 我们只需要使用两张单独的背景图片, 就可以实现. 滑动门一般用做网站Tab导航, 根据Tab中内容的长短自动缩放Tab的效果. 前面所述的圆角矩形只是它的一...
标签: Web开发
CSS sprites 是网站速度的优化很重要的一环,但也有其对性能的不利之处。 Vladimir Vukićević 的博文《To Sprite Or Not To Sprite》提到: CSS sprites 的最大问题是内存占用。非精确构造的 sprite 图片会占用意想不到的内存空间。以 WHIT TV 网站为例,这里是一张 sprite 图片,1299x15,000 的png,已经经过很好的压缩,实际...
标签: Web开发
选择器的分组 你可以对选择器进行分组,这样,被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中,我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。 h1,h2,h2,h3,h5,h6 {   color: green;   }继承及其问题 根据 CSS,子元素从父元素继承属性。但是它并不总是按此方式工作。看看下面这...

经验教程

707

收藏

37
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部