CSS Sprite 学习笔记

最新推荐文章于 2024-01-02 17:04:47 发布

英子的搬砖日志

最新推荐文章于 2024-01-02 17:04:47 发布

阅读量583

点赞数

分类专栏： CSS 性能优化文章标签： css css-sprite 雪碧图网页性能

本文链接：https://blog.csdn.net/ganyingxie123456/article/details/75575255

版权

CSS 同时被 2 个专栏收录

16 篇文章 2 订阅

订阅专栏

性能优化

8 篇文章 0 订阅

订阅专栏

1. 什么是CSS Sprite？

CSS Sprite 译为图片精灵，由称“雪碧图”，是一种网页图片应用的处理方式，简单来说就是把几张图拼成一张图而已。

它提供了一种把很多小图片拼成一张大图片的，从而在低并发的浏览器上达到快速传输并呈现内容的目的。

2. CSS Sprite的作用：

它最大的作用就是可以有效的减少http请求数量，加速显示内容。

因为每发一次http请求，就会和服务器连接一次，建立连接是需要额外的访问时间的，如果数量非常大就会造成网页性能上的不足，所以使用CSS Sprite，其实是网页提高性能的一个非常有效的途径。

3. CSS Sprite的使用规则：

（1）一般用于不随用户信息的变化而变化的静态图片。
（2）一般是小图片，但是图片容量比较大的。
（3）还有就是加载量比较大的图片。
（4）一般大图不建议拼成雪碧图（比如一些页面的轮播图之类的大图）。

4. CSS Sprite的原理：

主要就是利用css的background-position等属性进行背景定位。因为background-position：x坐标值 y坐标值，能精确的定位出背景图片在布局盒子中的位置。

5. CSS Sprite的不足：

首先是要想生成雪碧图比较麻烦，然后定位的准确位置必须经过测量才能确定，还有可能就是维护的时候，如果背景图片改变，那么可能雪碧图也必须得跟着改。

当然，一般我们按照上面的使用规则来使用雪碧图的话，雪碧图的使用还是很好的。

6. CSS Sprite生成工具

既然CSS Sprite是将许多张图合并成一张大图，那么可定有相应的工具，而我使用的是一个叫CssGaga的工具，具体请参考： http://www.99css.com/1524/

7. CSS Sprite 的应用

示例一：

有这么一张雪碧图：
这里写图片描述
实现这么一个效果：

代码示例：

<!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>css sprite</title>
    <style>
        .cat{
            width: 150px;
            background: #f8f8f8;
            border: 1px solid #bbb;
        }
        ul,h3{
            list-style: none;
            margin: 0;
            padding: 0;
        }
        li{
            display: block;
            height: 31px;
            line-height: 31px;   /*值和height设置一样，使得文字能够垂直居中*/
            overflow: hidden;
            border-bottom: 1px solid #dedede;
        }
        li i{
            background: url(./sprite_img.png);
            display:inline;
            width: 30px;
            height: 24px;
            float: left;
            margin: 3px 10px 0 0;
        }
        li h3{
            font-size: 14px;
            font-weight: 400px;
        }
        .cat-1 i{ background-position: 0 0; }
        .cat-2 i{
            background-position: 0 -24px; /*每个小图片的高度是24px*/
        }
        .cat-3 i{ background-position: 0 -48px;  }
        .cat-4 i{ background-position: 0 -72px;  }
        .cat-5 i{ background-position: 0 -96px;  }
        .cat-6 i{ background-position: 0 -120px; }
        .cat-7 i{ background-position: 0 -144px; }
        .cat-8 i{ background-position: 0 -168px; }
        .cat-9 i{ background-position: -40px 0;  }
    </style>
</head>
<body>

    <div class="cat">
        <ul>
            <li class="cat-1">
                <i></i>
                <h3>服装内衣</h3>
            </li>
            <li class="cat-2">
                <i></i>
                <h3>鞋包配饰</h3>
            </li>
            <li class="cat-3">
                <i></i>
                <h3>运动户外</h3>
            </li>
            <li class="cat-4">
                <i></i>
                <h3>珠宝手表</h3>
            </li>
            <li class="cat-5">
                <i></i>
                <h3>手机数码</h3>
            </li>
            <li class="cat-6">
                <i></i>
                <h3>办公家电</h3>
            </li>
            <li class="cat-7">
                <i></i>
                <h3>护肤彩妆</h3>
            </li>
            <li class="cat-8">
                <i></i>
                <h3>母婴用品</h3>
            </li>
            <li class="cat-9">
                <i></i>
                <h3>其他分类</h3>
            </li>
        </ul>
    </div>

</body>
</html>

示例二：

直接用html+css实现一个表单页面如下：

这里写图片描述

源码如下：

<!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>no sprite form</title>
    <style>
         body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{
            margin: 0;padding: 0;
            list-style: none;
            font-size: 14px;
            font-family: "Arial", "sans-serif", "微软雅黑", "宋体", "Tahoma";
        }
        .form{
            width: 300px;
            height:auto;
            margin: 10px;
            padding: 10px;
            border: 1px solid #000;
            border-radius: 5px;
        }
        .username, .password{
            margin: 5px 5px 5px 0;
            width:99%;
            height: 35px;
            border:1px solid #000;
            border-radius: 5px;
            background-color: #eef;
        }
        .check{
            margin: 10px;
            font-size: 12px;
        }
        .login,.register{
             width:100%;
             height: 40px;
             margin-top: 15px;
             border-radius: 5px;
        }
        .login{
            background-color: #6495ed;
        }
        .register{     
            background-color: #3cb371;
        }
    </style>
</head>
<body>

    <div class="form">
        <form action="">
            <label>用户名：</label>
            <input class="username" type="text" placeholder="邮箱/手机号/用户名"><br>
            <label>密&nbsp;&nbsp;&nbsp;码：</label>
            <input class="password" type="password" placeholder="请输入密码"><br>
            <label><input class="check" type="checkbox">记住密码</label>
            <label><input class="check" type="checkbox">下次自动登录</label>

            <button class="login">登录</button><br>
            <button class="register">注册</button>
        </form>
    </div>

</body>
</html>

然后将用户名框、密码框、登陆按钮、注册按钮都使用雪碧图做背景时，实现的效果：

这里写图片描述

代码：

<!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>css sprite</title>
    <style>
         body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{
            margin: 0;padding: 0;
            list-style: none;
            font-size: 14px;
            font-family: "Arial", "sans-serif", "微软雅黑", "宋体", "Tahoma";
        }
        .form{
            width: 300px;
            height:auto;
            margin: 10px;
            padding: 10px;
            border: 1px solid #000;
            border-radius: 5px;
        }
        .username,.password{
            width:99%;
            height: 35px;
            border:1px solid #000;
            border-radius: 5px;
            background: url(./sprite_img2.jpg);
        }
        .username{
           background-position: -5px -352px;
           background-size: 250%;
        }
        .password{
             background-position: -5px -350px;
             background-size:250%;
        }
        .check{
            margin: 10px;
            font-size: 12px;
        }
        .login,.register{
             margin-top: 15px;
             border-radius: 5px;
             background: url(./sprite_img2.jpg) no-repeat;
        }
        .login{
             width:100%;
             height: 40px;
             background-position: -1px -12px;
             background-size: 121%;

        }
        .register{     
             width:100%;
             height: 40px;
             background-position: -1px -70px;
             background-size: 121%;
        }
    </style>
</head>
<body>

    <div class="form">
        <form action="">
            <label>用户名：</label>
            <!--<dd class="username">邮箱/手机号/用户名</dd><br>-->
            <input class="username" type="text" placeholder="邮箱/手机号/用户名"><br>
            <label>密&nbsp;&nbsp;&nbsp;码：</label>
            <!--<dd class="password">请输入密码</dd><br>-->
            <input class="password" type="password" placeholder="请输入密码"><br>    
            <label><input class="check" type="checkbox">记住密码</label>
            <label><input class="check" type="checkbox">下次自动登录</label>

            <button class="login"></button><br>  <!--登录注册-->
            <button class="register"></button>
        </form>
    </div>

</body>
</html>

PS：本文是我学习CSS Sprite时候的个人总结，肯定会有不足或者不对的地方，欢迎您的指导，可留言或联系本人，感谢阅读。

英子的搬砖日志

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS Sprite 学习笔记

CSS Sprite 译为图片精灵，由称“雪碧图”，是一种网页图片应用的处理方式，简单来说就是把几张图拼成一张图而已。它提供了一种把很多小图片拼成一张大图片的，从而在低并发的浏览器上达到快速传输并呈现内容的目的
复制链接

扫一扫