No.24 CSS--雪碧图（Sprite,精灵图）

一、雪碧图

  • CSS Sprite也叫CSS精灵图、CSS雪碧图，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去。

1.1优点

  • 减少图片的字节
  • 减少网页的http请求，从而大大的提高页面的性能

1.2原理

  • 通过background-image引入背景图片
  • 通过background-position把背景图片移动到自己需要的位置

准备工作：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <title>Document</title>
    <style>
        .icon1{
            /* span是内联元素，不能直接设置大小,通过display：block变成一个块级元素 */
            display: block;
            width: 60px;
            height: 66px;
            background-image: url(1.png);
            border: 1px solid red;
            background-position: -2px 0px;
        }
        .icon2{
            /* span是内联元素，不能直接设置大小,通过display：block变成一个块级元素 */
            display: block;
            width: 60px;
            height: 66px;
            background-image: url(1.png);
            border: 1px solid red;
            background-position: -2px 126px;
        }
    </style>
</head>

<body>
    <span class="icon1"></span>
    <span class="icon2"></span>
</body>

</html>

 

 

 

 

posted @ 2025-02-28 09:50  百里屠苏top  阅读(243)  评论(0)    收藏  举报