【Demo】CSS图像拼合技术
图像拼合
图像拼合 - 简单实例
<style> img.home { width: 46px; height: 44px; background: url(/images/img_navsprites.gif) 0 0; } img.next { width: 43px; height: 44px; background: url(/images/img_navsprites.gif) -91px 0; } </style> </head> <body> <img class="home" src="/images/img_trans.gif"><br><br> <img class="next" src="/images/img_trans.gif"> </body>
实例解析:
- <img class="home" src="img_trans.gif" /> -因为不能为空,src属性只定义了一个小的透明图像。显示的图像将是我们在CSS中指定的背景图像
- 宽度:46px;高度:44px; - 定义我们使用的那部分图像
- background:url(img_navsprites.gif) 0 0; - 定义背景图像和它的位置(左0px,顶部0px)
图像拼合 - 创建一个导航列表
<style> #navlist{position:relative;} #navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;} #navlist li, #navlist a{height:44px;display:block;} #home{left:0px;width:46px;} #home{background:url('/images/img_navsprites.gif') 0 0;} #prev{left:63px;width:43px;} #prev{background:url('/images/img_navsprites.gif') -47px 0;} #next{left:129px;width:43px;} #next{background:url('/images/img_navsprites.gif') -91px 0;} </style> </head> <body> <ul id="navlist"> <li id="home"><a href="/"></a></li> <li id="prev"><a href="/css/"></a></li> <li id="next"><a href="/css/"></a></li> </ul> </body>
实例解析:
- #navlist{position:relative;} - 位置设置相对定位,让里面的绝对定位
- #navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;} - margin和padding设置为0,列表样式被删除,所有列表项是绝对定位
- #navlist li, #navlist a{height:44px;display:block;} - 所有图像的高度是44px
现在开始每个具体部分的定位和样式:
- #home{left:0px;width:46px;} - 定位到最左边的方式,以及图像的宽度是46px
- #home{background:url(img_navsprites.gif) 0 0;} - 定义背景图像和它的位置(左0px,顶部0px)
- #prev{left:63px;width:43px;} - 右侧定位63px(#home宽46px+项目之间的一些多余的空间),宽度为43px。
- #prev{background:url('img_navsprites.gif') -47px 0;} - 定义背景图像右侧47px(#home宽46px+分隔线的1px)
- #next{left:129px;width:43px;}- 右边定位129px(#prev 63px + #prev宽是43px + 剩余的空间), 宽度是43px.
- #next{background:url('img_navsprites.gif') no-repeat -91px 0;} - 定义背景图像右边91px(#home 46px+1px的分割线+#prev宽43px+1px的分隔线)
图像拼合s - 悬停效果
我们添加悬停效果只添加三行代码:
#home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;}
#prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}
#next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;}