css笔记15（精灵图）

最新推荐文章于 2024-07-25 08:14:42 发布

LiNO3

最新推荐文章于 2024-07-25 08:14:42 发布

阅读量267

点赞数

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

本文链接：https://blog.csdn.net/qq_60471941/article/details/122385306

版权

笔记专栏收录该内容

54 篇文章 2 订阅

订阅专栏

精灵图（sprites）

css精灵技术的目的：有效减少服务器发送和接收次数，提高加载速度。

核心：

将多个背景图片整合到一张大图片中
通过移动背景图片位置到盒子中来显示（background-position）、
移动距离为目标图片的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>精灵图名字案例</title>
    <style>
        div {
            width: 300px;
            margin: auto;
        }
        
        span {
            display: inline-block;
            background: url(zm.png) no-repeat;
        }
        
        .l {
            width: 98px;
            height: 117px;
            background-position: -5px -272px;
        }
        
        .i {
            width: 69px;
            height: 114px;
            background-position: -321px -136px;
        }
        
        .x {
            width: 108px;
            height: 109px;
            background-position: -250px -559px;
        }
    </style>
</head>

<body>
    <div>
        <span class="l"></span>
        <span class="i"></span>
        <span class="x"></span>
    </div>
</body>

</html>

LiNO3

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css笔记15（精灵图）

精灵图（sprites）css精灵技术的目的：有效减少服务器发送和接收次数，提高加载速度。核心：将多个背景图片整合到一张大图片中通过移动背景图片位置到盒子中来显示（background-position）、移动距离为目标图片的x，y坐标。（向右向下为正）使用时必须精确测量每一个小背景图片的大小和位置使用!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
复制链接

扫一扫

专栏目录