css精灵图的使用步骤

最新推荐文章于 2024-05-16 17:48:19 发布

zzzley

最新推荐文章于 2024-05-16 17:48:19 发布

阅读量1k

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_43286995/article/details/128133493

版权

前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

精灵图的使用步骤

1.创建一个盒子，例如span、b、div
2.设置盒子的大小为小图片的大小
3.设置背景图片为精灵图
4.测量小图片距离精灵图左边和上边的距离（background-position：x y）,x和y的值均为负数。

下面这就是一个精灵图。
在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .five{
            display: inline-block;
            width: 22px;
            height: 24px;
            background-image: url(./images/taobao.png);
            background-position: -1px -175px;
        }
        span {
            display: inline-block;
            width: 18px;
            height: 24px;
            background-color: pink;
            background-image: url(./images/taobao.png);
            /* 背景图位置属性: 改变背景图的位置 */
            /* 水平方向位置  垂直方向的位置 */
            /* 想要向左侧移动图片, 位置取负数;  */
            background-position: -3px 0;
        }

        b {
            display: block;
            width: 25px;
            height: 21px;
            background-color: green;
            background-image: url(./images/taobao.png);
            background-position: 0 -90px;
        }
        
    </style>
</head>
<body>
    <!-- <img src="./images/taobao.png" alt=""> -->
    <!-- 精灵图的标签都用行内标签  span, b, i -->
    <span></span>
    <b></b>
    <span class="five"></span>
</body>
</html>

在这里插入图片描述

zzzley

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css精灵图的使用步骤

1.创建一个盒子，例如span、b、div2.设置盒子的大小为小图片的大小3.设置背景图片为精灵图4.测量小图片距离精灵图左边和上边的距离（background-position：x y）,x和y的值均为负数。下面这就是一个精灵图。
复制链接

扫一扫