CSS精灵技术（sprite）

　　CSS技术的使用场景：有效的减少了服务器接收和发送请求的次数，css精灵是一种出来网页背景图像的方式，将一个页面设计到的所有零星背景图集中到一张大图中去，然后将大图应用于网页 。通过background-position 和padding来实现

例如要切大图里的小图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        span {
            float: left;
            background: url(image/abcd.jpg);
        }
        span:first-child {
            width: 64px;
            height: 106px;
            background-position: -325px -142px; 
        }
        span:nth-child(2) {
            width: 137px;
            height: 104px;
            background-position: -114px -564px;
        }
    </style>
</head>
<body>
    <span></span>
    <span></span>
    <span></span>
</body>
</html>

 

 

制作精灵图遵循原则
1. 精灵图上放的都是小的装饰性质的背景图片，插入图片不能往上放
2. 精灵图的宽度取决于最宽的那个背景
3. 可以横向摆放也可以纵向

 

posted @ 2019-11-26 15:30  ivy_wang  阅读(570)  评论(0)  编辑  收藏  举报