H5-33 CSS Sprite

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

1、优点:

  ①减少图片字节

  ②减少网页的http请求,从而大大的提高页面的性能

2、原理:

  ①通过background-image引入背景图片

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

3、实列:

    <span class="a1"></span>
    <span class="a2"></span>
  
        .a1{
            display: block;
            width: 45px;
            height: 70px;
            background-image: url(./1.jpg);
            border: 1px solid red;
            background-position:-92px -14px;
        }
        .a2{
            display: block;
            width: 45px;
            height: 70px;
            background-image: url(./1.jpg);
            border: 1px solid red;
            background-position:-257px -14px;
        }

 

  

posted @ 2024-12-08 20:41  张筱菓  阅读(21)  评论(0)    收藏  举报