CSS Sprite 学习笔记

来源：互联网发布：网路和网络编辑：程序博客网时间：2024/06/06 00:02

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