标签:网页设计 背景图片 图片合并 维护 单元 删除 dem one level
一、CSS Sprites原理
CSS Sprites其实就是把网页中一些小背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字精确的定位出背景图片的具体位置。
二、CSS Sprites优缺点
三、CSS Sprites Demo
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>css sprites demo</title> <style> ul.Sprites { margin: 0 auto; border: 1px solid #3a9; width: 300px; padding: 10px; } ul.Sprites li { list-style: none; height: 24px; overflow: hidden } ul.Sprites li span { float: left; width: 17px; padding-top: 5px; height: 17px; overflow: hidden; background: url(image/bg.png) no-repeat } ul.Sprites li a { padding-left: 5px } ul.Sprites li span.a1 { background-position: 0px -0px; } ul.Sprites li span.a2 { background-position:0px -25px; } ul.Sprites li span.a3 { background-position:0px -50px; } ul.Sprites li span.a4 { background-position:0px -75px; } ul.Sprites li span.a5 { background-position: 0px -100px; } </style> </head> <body> <ul class="Sprites"> <li><span class="a1"></span> <a href="#">百度</a> </li> <li><span class="a2"></span> <a href="#">淘宝</a> </li> <li><span class="a3"></span> <a href="#">新浪</a> </li> <li><span class="a4"></span> <a href="#">网易</a> </li> <li><span class="a5"></span> <a href="#">搜狐</a> </li> </ul> </body> </html>
这个是bg.png
background-position:一般都为负值,因为合成后的大图片左上角定为0px 0px; 注意写的时候两个位置之间不要加逗号呦!!!
附上效果图:
ok,其他不多说了,如果我写的内容有问题,或者侵权可以联系我!我及时删除。
内容出处:来源于网络,文字部分来自百度百科。
标签:网页设计 背景图片 图片合并 维护 单元 删除 dem one level
原文地址:http://www.cnblogs.com/gaoxuerong123/p/7113008.html