详解css图像拼合技术（精灵图）

时间：2021-05-08

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 的位置来改变图片的位置持续更新，欢迎大家指教！

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

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章