精灵图（雪碧图）介绍及使用~

最新推荐文章于 2024-05-16 03:33:59 发布

东北玛丽的小笔记

最新推荐文章于 2024-05-16 03:33:59 发布

阅读量2.2k

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_44614856/article/details/87775052

版权

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

目的：
为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度
本质：
CSS精灵图是一种处理网页背景图像的方式，它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来
精灵图的使用：
CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，就需要使用CSS的

background-image、
background-repeat
background-position属性进行背景定位，
其中最关键的是使用background-position 属性精确地定位

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box{
            width: 25px;
            height: 25px;
            background:url(images/tb.png) no-repeat  0 -125px;
        }
    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>

东北玛丽的小笔记

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
精灵图（雪碧图）介绍及使用~

目的：为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度本质：CSS精灵图是一种处理网页背景图像的方式，它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来精灵图的使用：CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵...
复制链接

扫一扫