CSS Sprite（雪碧图）简单使用

时间 2019-11-10

标签 css sprite 雪碧简单使用栏目 CSS 繁體版

原文原文链接

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

雪碧图的使用有如下几个优势html

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

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

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

简单上个小案例学习

雪碧图flex

代码：ui

<!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>

效果url

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

1. CSS Sprite雪碧图
2. css Sprite雪碧图
3. css sprite 雪碧图
4. CSS Sprite雪碧图应用
5. CSS Sprite——CSS雪碧图
6. Sprite - 雪碧图
7. 使用Vue + 雪碧图（CSS sprite），webpack-spritesmith
8. 教你来使用雪碧图（CSS sprite）
9. CSS Sprite 雪碧图制做
10. 关于css雪碧图sprite
更多相关文章...
• 使用 CSS 显示 XML - XML 教程
• MySQL视图简介 - MySQL教程
• Git可视化极简易教程 — Git GUI使用方法
• Composer 安装与使用