您的位置:首页 >互联网 >正文

科技常识:详解css图像拼合技术(精灵图)

今天小编跟大家讲解下有关详解css图像拼合技术(精灵图) ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关详解css图像拼合技术(精灵图) 的相关资料,希望小伙伴们看了有所帮助。

CSS图像拼合技术

1.图像拼合

图像拼合技术就是单个图像的集合。 有很多图片的网页可能会需要很多时间来加载和生成多个服务器的请求。 使用图像拼合会降低服务器的请求数量 并节省带宽。图像拼合实例

有了css样式 我们可以显示我们需要的图像的一部分

详细代码如下:

<!doctype html> <html> <head> <meta charset="utf-8"/> <title>图片整合</title> <style> .box{ width:200px; margin:0 auto; overflow:hidden; } .iton{ width:43px; margin-left:10px; height:44px; float:left; background:url(images/img_navsprites_hover.gif) no-repeat; } .span01{ background-position:0 0; } .span02{ background-position:-47px 0; } .span03{ background-position:-91px 0; } .span01:hover{ background-position:0 -45px ; } .span02:hover{ background-position:-47px -45px ; } .span03:hover{ background-position:-91px -45px ; } </style> </head> <body <div class="box"> <span class="iton span01"></span> <span class="iton span02"></span> <span class="iton span03"></span> </div> <body> </html>

运行结果如下图:

这个效果加了一个悬浮样式鼠标悬停到元素上 设置background-position 的位置来改变图片的位置持续更新 欢迎大家指教!

以上就是本文的全部内容 希望对大家的学习有所帮助 也希望大家多多支持爱蒂网。

来源:爱蒂网

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时候联系我们修改或删除,多谢。