CSS高级技巧（3）css精灵技术（sprite）

最新推荐文章于 2020-10-09 17:15:34 发布

克罗地亚狂想曲

最新推荐文章于 2020-10-09 17:15:34 发布

阅读量149

点赞数

分类专栏： web前端文章标签： css html

本文链接：https://blog.csdn.net/u010963053/article/details/105838562

版权

web前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

css sprite

概念

一种处理网页背景图像的方式。将一个页面涉及到的所有零散背景图像都集中到一张大图中去，将大图应用于网页。这样，当用户访问该页面时，只需向服务器发送一次请求，网页中的背景图就可以全部显示。这个大图称为精灵图。

使用方法

小的项目背景图很少，没必要啊使用精灵技术，背景图很多的情况可以使用

使用定位取出图片

background-image;

background-repeat;

background-position;

/* 
*/
<html>
<head> 
    <style>
    div {
        width: 17px;
        height: 13px;
        background: url(images/jd,png) no-repeat;
        background-positon: 0 -388px;    /* 根据坐标选取图片，若背景图片往上移动，为负值 */
    }

    </style>
</head>
<body>
    <div>
        
    <div>
</body>
</html>

克罗地亚狂想曲

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS高级技巧（3）css精灵技术（sprite）

css sprite概念一种处理网页背景图像的方式。将一个页面涉及到的所有零散背景图像都集中到一张大图中去，将大图应用于网页。这样，当用户访问该页面时，只需向服务器发送一次请求，网页中的背景图就可以全部显示。这个大图称为精灵图。使用方法小的项目背景图很少，没必要啊使用精灵技术，背景图很多的情况可以使用使用定位取出图片background-image;background...
复制链接

扫一扫

专栏目录