何为精灵图片CSS Sprites

CSS Sprites其实就是把网页中一些背du景图片整合到一张图片文件中,再利用CSS的daobackground-imagebackground- repeatbackground-position的组合进行背景定位,background-position可以用数字能精确的定位出背景图片的位置。这样可以减少很多图片请求的开销。

如下的图就是精灵图片:

精灵图片

我们只需要移动 背景图片的在盒子中位置 来使用,配合ps使用来测量位置最舒服了。

使用

值得注意的是,如果我想右移背景图片,那么background-position: x y; x坐标要是负数 同理 下移动背景 y坐标也得是负数。

image-20210103162720038

例如效果

image-20210103162833179

    <style>
        .box1 {
            width: 60px;
            height: 60px;
            border: 1px solid black;
            margin: 100px auto;
            background: url(./img/sprites.png) no-repeat scroll -182px 0px;
        }
    </style>

<body>
    <div class="box1"></div>
</body>

结语

放假的第八天
微信小程序

本文由 越行勤 创作,如果您觉得本文不错,请随意赞赏
采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外,均为本站原创或翻译,转载前请务必署名
原文链接:https://yingwiki.top/2021/01/03/c-s-s--jing-ling-tu-pian
最后更新于:  264  天前,内容可能已经不具有时效性,请谨慎参考。

Q.E.D.


努力学习的小菜鸟