CSS 图像拼合技术.pdfVIP

CSS 图像拼合技术 CSS 图像拼合技术 图像拼合 图像拼合就是单个图像的集合。 有许多图像的⽹页可能需要很长的时间来加载和⽣成多个服 器的请求。 使⽤图像拼合会降低服 器的请求数量，并节省带宽。 图像拼合 - 简单实例 与其使⽤三个独⽴的图像，不如我们使⽤这种单个图像 （img_navsprites.gif）： 有了CSS ，我们可以只显⽰我们需要的图像的⼀部分。 在下⾯的例⼦CSS指定显⽰ img_navsprites.gif 的图像的⼀部分： 实例 img .home { width:46px; height:44px; backgro nd: rl(img_navsprites.gif) 0 0; } 尝试⼀下 » 实例解析： img class=home src=img_trans.gif / - 因为不能为空,src属性只定义了⼀个⼩ 的透明图像。显⽰的图像将是我们在CSS 中指定的背景图像 宽度：46px;⾼度：44px; - 定义我们使⽤的那部分图像 backgro nd: rl(img_navsprites.gif) 0 0; - 定义背景图像和它的位置 （左0px ，顶部 0px ） 这是使⽤图像拼合最简单的⽅法，现在我们使⽤链接和悬停效果。 图像拼合 - 创建⼀个导航列表 我们想使⽤拼合图像 (img_navsprites.gif) ，以创建⼀个导航列表。 我们将使⽤⼀个HTML列表，因为它可以链接，同时还⽀持背景图像： 实例 #navlist{position:relative;} #navlist li{margin:0;padding:0;list-style:none;position:absol te;top:0;} #navlist li , #navlist a{height:44px;display:block ;} #home{left:0px;width:46px;} #home{backgro nd: rl(img_navsprites.gif) 0 0;} #prev{left:63px;width:43px;} #prev{backgro nd: rl(img_navsprites.gif) -47px 0;} #next{left:129px;width:43px;} #next{backgro nd: rl(img_navsprites.gif) -9 1px 0;} 尝试⼀下 » 实例解析： #navlist{position:relative;} - 位置设置相对定位，让⾥⾯的绝对定位 #navlist li{margin:0;padding:0;list-style:none;position:absol te;top:0;} - margin和 padding设置为0 ，列表样式被删除，所有列表项是绝对定位 #navlist li , #navlist a{height:44px;display:block ;} - 所有图像的⾼度是44px 现在开始每个具体部分的定位和样式： #home{left:0px;width:46px;} - 定位到最左边的⽅式，以及图像的宽度是46px #home{backgro nd: rl(img_navsprites.gif) 0 0;} - 定义背景图像和它的位置 （左 0px ，顶部0px ） #prev{left:63px;width:43px;} - 左外边距定位63px （＃home宽46px+项⽬之间的 ⼀些多余的空间），宽度为43px 。 #prev{backgro nd: rl(img_navsprites.gif) -47px 0;} - 定义背景图像向右侧定位 47px （＃home宽46px+分隔线的1px ） #next{left:129px;width:43px;}- 左外边距定位129px(#prev 63px + #prev宽是43px + 剩余的空间), 宽度是43px . #next{backgro nd: rl(img_navsprites.gif) no-repeat -9 1px 0;} - 定义背景图像向右 侧定位9 1px （＃home 46px