【前端】CSS Sprites切图

来源：互联网发布：java调用微信发送消息编辑：程序博客网时间：2024/05/21 13:22

有的时候查看网页，发现源文件里面，所有的图标都被做在了一张图片上！然后想用哪个就定位哪个，感觉挺好的。

<!DOCTYPE html><html><head>    <title>CSS切图</title>    <!--         CSS Sprites切图技术。CSS Sprites其实就是把网页中一些图标整合到一张图片文件中，        再利用CSS的“background-image”，“background- repeat”，“background-position”的组        合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。        优点：减少网页http请求，提高页面性能，降低服务器负载。        缺点：定位繁琐，布局固定，降低网页弹性。    -->    <meta charset="utf-8">    <style>        .t-default{             background-image: url("index.png");            background-repeat:no;            width: 85px;              height: 65px;          }        .t-floder{            background-position: -315px 0px;        }        .t-pos{            background-position: 562px 207px;        }    </style></head><body>    <div class="t-default t-floder"></div>    <div class="t-default t-pos"></div></body></html>

result:

index.png

png

1 0