CSS sprite(sprite)很容易使用

顺晟科技

2022-09-13 13:50:01

151

CSS Sprite，我们一般叫他雪碧图或精灵图，它是一种图像拼合技术。该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。

雪碧图的使用有以下几个优点

减少图片的字节。
减少网页的http请求，从而大大的提高页面的性能。
解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。

雪碧图的合成可以在这进行拼合：https://www.toptal.com/developers/css/sprite-generator。至于用法我就不教了

语法：background-position:npx npx;
（第一个值是调左右的，当你需要将背景图向右调的时候用正值，向左则为负值同理将背景图上下调动的时候上是用负值，下是正值）

简单上个小案例

雪碧图

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .logo{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .bg{
    margin-left: 20px;    
    width: 100px;
    height: 100px;
    background-image: url(css_sprites.png);
    }
    .logo1{
   
    background-position: -25px -20px;
    }
    .logo2{
   
   background-position: -466px -20px;
   }
   .logo3{
   
   background-position: -466px -168px;
   }
   .logo4{
   
   background-position: -914px -313px;
   }
   .logo5{
   
   background-position: -616px -313px;
   }
    </style>
</head>
<body>
    
    <div class="logo">
        <div class="bg logo1"></div>
        <div class="bg logo2"></div>
        <div class="bg logo3"></div>
        <div class="bg logo4"></div>
        <div class="bg logo5"></div>
    </div>
</body>
</html>

效果

样式中flex若有不同，可看我《Flex布局学习（一）》这篇笔记

上一篇：你所不知道的 CSS 滤镜技巧与细节下一篇：更新CSS sprite生成工具4.

网站建设

Css

CSS sprite(sprite)很容易使用