.bg_sprite{background-image:url(/整图地址); background-repeat:no-repeat}

引用该类 .. 然后在元素中逐一定义背景坐标 .. 以下为关键属性 ..

#ico1 {width:容器宽度;height:容器高度;background-position:X坐标 Y坐标}

#ico2 {width:容器宽度;height:容器高度;background-position:X坐标 Y坐标}

#ico3 {width:容器宽度;height:容器高度;background-position:X坐标 Y坐标}

.nav {width:容器宽度;height:容器高度;background-position:X坐标 Y坐标}

必须要限定容器大小符合背景图元素位置 .. 另外 .. XY轴是相对于整张图片的左上角来算的 .. 所以取值一定要算清楚。

举个栗子：

　　　　　　　.img{background:url(img/img.png)  no-repeat;}

            .qq{height:34px;width:30px;background-position:0 0;}

            .pic{height:12px;width:50px;background-position:-30px 0;}

            .b1{height:74px;width:74px;background-position:-80px 0;}

            .b4{height:74px;width:74px;background-position:-154px 0;}

            .b2{height:74px;width:74px;background-position:-228px 0;}

            .b3{height:74px;width:74px;background-position:-302px 0;}

            .b5{height:120px;width:167px;background-position:-376px 0;}

精灵图生成工具，和使用方法都在这篇文章里：http://developer.51cto.com/art/201504/474506.htm

CSS Sprite 精灵图的更多相关文章

  1. 第9天：CSS精灵图

    今天重点学习了CSS精灵图. "CSS精灵",英语css sprite,所以也叫做"CSS雪碧"技术.是一种CSS图像合并技术,该方法是将小图标和背景图像合并到 ...

  2. Css - 精灵图

    Css - 精灵图css sprite 一个页面文档上总是会有N多的图标小图片,它们都是以背景图的方式嵌入文档,每个小图片需要一个url的css属性,每个url都指向一个服务器地址的链接,每个链接都代 ...

  3. CSS Spritec下载,精灵图，雪碧图，初探之原理、使用

    CSS Spritec下载,精灵图,雪碧图,初探之原理.使用 关于CSS Sprite CSSSprites在国内很多人叫css精灵雪碧图,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零 ...

  4. web前端sprite，精灵图，雪碧图

    css sprite 俗称:精灵图,雪碧图,指将整个页面不同的图片or图标合并在一张图上:优点:使用CSS Sprite 可以减少网络请求,提高网页加载性能,不会出现网页上端加载完毕下面还在加载中这一 ...

  5. CSS.05 -- 规避脱标 定位的盒子居中、CSS标签规范、溢出隐藏、内容移除（网页优化）、CSS精灵图

    规避脱标   定位的盒子居中显示 Margin:0 auto : 只能让标准流的盒子居中对齐 当A是B的父系,B可以使用 margin-left:auto: 来获得相当于定位right:0:的效果 M ...

  6. CSS入门（背景各种属性的详解、垂直居中和过渡效果的详解、渐变效果的简单讲解、雪碧图和精灵图）

    一.各种背景属性 1.background-image 属性为元素设置背景图像. 元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距. 默认地,背景图像位于元素的左上角,并在水平和垂直方 ...

  7. CSS背景和精灵图

    如何设置背景图片? 1.在CSS中有个叫做background-image:url():的属性,就是专门用于设置背景图片的. 2.注意点: 1)图片的地址必须放在url()中,图片的地址可以是本地的地 ...

  8. Uint 7.文本和字体属性,background,精灵图和3种定位

    一. 文本属性 CSS 文本属性可定义文本的外观. 通过文本属性,您可以改变文本的颜色.字符间距,对齐文本,装饰文本,对文本进行缩进,等等. <!DOCTYPE html> <htm ...

  9. Gulp命令自动生成精灵图

    文件目录说明 gulpfile.js代码 var gulp = require('gulp'); var spritesmith = require('gulp.spritesmith'); var ...

随机推荐

  1. SQL查询和替换含有回车，空格，TAB，等

    ---如下是查询语句 --查询名称有退格键 ),item_name) go --查询名称有制表符tab ),item_name) go --查询名称有换行 ),item_name) go --查询名称 ...

  2. S11 day 94 RestFramework 之 APIView视图

    VIEW视图(Django自带的) 1.  url url(r'login/$', views.login.as_view()), 2.点开 as_view() , as_view()为类方法.  l ...

  3. day74天中间件介绍

    一. importlib settings 执行结果: 两个process_request  process_response按照注册顺序的倒叙进行执行 PROCESS_VIEW  Process_v ...

  4. [USACO5.1] 乐曲主题Musical Themes

    题目链接:戳我 Emmm......hash怎么做啊不会啊 这里是SA后缀数组版本的 就是先两两做差分,作为要处理后缀的数组.普通地求出来h数组之后,我们二分这个答案,然后判定是否合法就行了.是否合法 ...

  5. day24 计算任意文件夹大小 , 校验大文件的一致性 , 发抢红包程序

    #!/usr/bin/env python# -*- coding:utf-8 -*- # 1.计算任意一个文件夹的大小(考虑绝对路径的问题)# 基础需求 这个文件夹中只有文件# 进阶需求 这个文件夹 ...

  6. 898. Bitwise ORs of Subarrays

    We have an array A of non-negative integers. For every (contiguous) subarray B = [A[i], A[i+1], ..., ...

  7. LOJ#3087. 「GXOI / GZOI2019」旅行者（最短路）

    题面 传送门 题解 以所有的感兴趣的城市为起点,我们正着和反着各跑一边多源最短路.记\(c_{0/1,i}\)分别表示正图/反图中离\(i\)最近的起点,那么对于每条边\((u,v,w)\),如果\( ...

  8. POJ 1102

    #include<iostream>// cheng da cai zi 11.14 using namespace std; int main() { int i; int j; int ...

  9. eclip 重写从父类继承的方法的快捷操作

    转载自http://blog.sina.com.cn/s/blog_53d599430101phlo.html     一.在代码中单击鼠标右键,在弹出的快捷菜单中选择“源代码(Source)”-&g ...

  10. Java之IO(十二)CharArrayReader和CharArrayWriter

    转载请注明源出处:http://www.cnblogs.com/lighten/p/7082668.html 1.前言 本章介绍字符数组流,作用和ByteArrayInputStream字节数组流相同 ...