CSS高級技能:CSS Sprites

2021-01-20 17:39 jianzhan

上1篇CSS实例教程文章内容:CSS高級技能:圆角矩形框
CSS Sprites, 运用CSS background-position 开展情况肯定精准定位, 降低HTTP恳求, 加快网页页面显示信息, 处理照片加载闪烁难题的技能.
CSS Sprites最合适用来做的, 恩, 例如: 清单导航栏的CSS电脑鼠标旋转实际效果 很多小标志集中化的运用 (FckEditor) ...许多许多,多的想不出来了.
完成基本原理简易地说便是操纵器皿的尺寸, 随后运用background-repeat, background-position来对情况照片开展精准定位. 更能够了解为将网站很多情况图整合到1张大图中的这类个人行为( 表象上 )
用1个电脑鼠标旋转恶性事件来讲明吧:
提前准备:

01.jpg02.jpg
HTML编码:

<ul>
<li><a id="item1" href="#" title="Item 1">&nbsp;</a></li>
<li><a id="item2" href="#" title="Item 2">&nbsp;</a></li>
<li><a id="item3" href="#" title="Item 3">&nbsp;</a></li>
<li><a id="item4" href="#" title="Item 4">&nbsp;</a></li>
<li><a id="item5" href="#" title="Item 5">&nbsp;</a></li>
<li><a id="item6" href="#" title="Item 6">&nbsp;</a></li>
<li><a id="item7" href="#" title="Item 7">&nbsp;</a></li>
<li><a id="item8" href="#" title="Item 8">&nbsp;</a></li>
<li><a id="item9" href="#" title="Item 9">&nbsp;</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: ⑴00px 0;}
a#item3:hover {background-position: ⑵00px 0;}
a#item4:hover {background-position: 0 ⑴00px;}
a#item5:hover {background-position: ⑴00px ⑴00px;}
a#item6:hover {background-position: ⑵00px ⑴00px;}
a#item7:hover {background-position: 0 ⑵00px;}
a#item8:hover {background-position: ⑴00px ⑵00px;}
a#item9:hover {background-position: ⑵00px ⑵00px;}

实际效果图以下:


有人要问了, 这有甚么用么? 这能够仿真模拟照片热区表明, 地形图提醒 这些...
Tips:
CSS Sprites必须精准的情况照片精准定位, 较为令人头疼.
相对降低了数次HTTP恳求的优势, 却提升了1次性1个大的HTTP恳求的缺陷... 自身衡量吧
下1篇CSS实例教程文章内容:CSS高級技能:照片更换