CSS Sprite(精灵图)

最新推荐文章于 2024-10-02 15:35:50 发布

浅笑心柔142

最新推荐文章于 2024-10-02 15:35:50 发布

阅读量281

点赞数 3

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_72013756/article/details/141567055

版权

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

优点：

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

原理：

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

实例：

<head>
<style>
     .icon1{
    display:block;/*转为块级元素*/
    width:60px;
    height:70px;
    background-image:url(./表情包.png);
    border:1px solid red;
    background-position:-20px -20PX;/*定位你需要的表情包的位置*/

     }


     .icon2{
    display:block;/*转为块级元素*/
    width:60px;
    height:70px;
    background-image:url(./表情包.png);
    border:1px solid red;
    background-position:-207px -116PX；/*定位你需要的表情包的位置*/

     }


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