css精灵图

最新推荐文章于 2024-08-03 09:05:49 发布

Java～develop

最新推荐文章于 2024-08-03 09:05:49 发布

阅读量635

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/matengbing/article/details/79720126

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

精灵图

从淘宝下载含有多张小图标的大图，使用时使用background-image及背景图片位置属性显示图片的一小部分。

使用adobe fireworks查看图片中小图标在图片中的位置（左上角为0,0），如下图，其中一个图标的位置（左上角）为0,44

宽为24，高为24,。

 <title>精灵图</title>
    <style>
        .box{
            width: 24px;
            height: 24px;
            background-image: url("../images/taobaobg.png");
            background-position-y: -44px;            /*-代表向上*/
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
</body>

x坐标为0，y坐标为44px，图片位置向上移动44px，即background-position-y: -44px;

指定图片大小，开始位置为0,44。显示效果：