详解css图象拼合技术性（小精灵图）

日期：2021-03-01 类型：科技新闻 

关键词：小游戏源代码，互动小游戏微信，自制小游戏，html5游戏，制作游戏大概多少钱

CSS图象拼合技术性

1.图象拼合

  • 图象拼合技术性便是单独图象的结合。
  • 有许多照片的网页页面将会会必须许多時间来载入和转化成好几个服务器的恳求。
  • 应用图象拼合会减少服务器的恳求数量，并节约带宽。图象拼合案例

有了css款式，大家能够显示信息大家必须的图象的1一部分

详尽编码以下：

<!doctype html>
<html>
<head>
    <meta charset="utf⑻"/>
    <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:⑷7px 0;
}
.span03{
    background-position:⑼1px 0;
}
.span01:hover{
    background-position:0 ⑷5px ;
}
.span02:hover{
    background-position:⑷7px ⑷5px ;
}
.span03:hover{
    background-position:⑼1px ⑷5px ;
}
    </style>
</head>
<body
<div class="box">
        <span class="iton span01"></span>
        <span class="iton span02"></span>
        <span class="iton span03"></span>
    </div>
<body>
</html>

运作結果以下图：
 

这个实际效果加了1个飘浮款式电脑鼠标悬停到元素上，设定background-position 的部位来更改照片的部位不断升级，欢迎大伙儿指教！

以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。

上一篇：CSS中clip 返回下一篇：没有了