<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>40-CSS精灵图</title>

    <style>

        .box{

            width: 86px;

            height: 28px;

            background-image: url(images/weibo.png);

            background-position: -425px -200px;

        }

    </style>

</head>

<body>

<!--

1.什么是CSS精灵图

CSS精灵图是一种图像合成技术

2.CSS精灵图作用

可以减少请求的次数, 以及可以降低服务器处理压力

3.如何使用CSS精灵图

CSS的精灵图需要配合背景图片和背景定位来使用

-->

<div class="box"></div>

</body>

</html>

H5 40-CSS精灵图的更多相关文章

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

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

  2. 第9天：CSS精灵图

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

  3. Css - 精灵图

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

  4. css雪碧图-css精灵图

    先将图片拼接在一张图上.类似实现的效果图 图片地址为合并后的图片地址,通过background-position调整背景图的位置.效果如: HTML: <div class="logo ...

  5. CSS背景和精灵图

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

  6. HTML连载35-背景图片的练习、精灵图

    一.背景图片练习 解释:这个例子需要注意的是,我们背景图片嵌套到另一个图片之中.我们设计的注意点在于,怎么定位到我们想定位到的地方. 总结:背景图片就是一块一块的,我们想把块的位置定位好(一般就是宽和 ...

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

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

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

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

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

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

随机推荐

  1. Android 弹出输入框

    final EditText inputServer = new EditText(SettingActivity.this); AlertDialog.Builder builder = new A ...

  2. PHP中Snoopy类的使用

    最近看PHP书籍,发现了一个好东东,就是Snoopy类.Snoopy是一个php类库,用来模拟浏览器的功能,可以获取网页内容,发送表单. Snoopy的一些特点: 1抓取网页的内容 fetch 2 抓 ...

  3. Java入门（二）：注释和基本数据类型

    上次通过eclipse在控制台输出了hello world,是不是有点小激动啊,今天接着介绍Java基础知识. 一.Java注释 1.Java注释语句不会被编译器运行,不用担心代码因为许多注释语句显得 ...

  4. February 17th, 2018 Week 7th Saturday

    The happiest part of a man's life is what he passes lying awake in bed in the morning. 人生一大乐事莫过去早上醒来 ...

  5. 【C编程基础】C程序常用函数

    基础知识 1.const const 修饰的数据类型是指常类型,常类型的变量或对象的值是不能被更新的. ; 或 ; //在定义该const变量时,通常需要对它进行初始化,因为以后就没有机会再改变它了 ...

  6. Fluentd初探 简介与安装

    Fluentd是一个开源的数据收集器,专为处理数据流设计,有点像 syslogd ,但是使用JSON作为数据格式.它采用了插件式的架构,具有高可扩展性高可用性,同时还实现了高可靠的信息转发. 据分(Y ...

  7. Thread.currentThread()和this的区别——《Java多线程编程核心技术》

    前言:在阅读<Java多线程编程核心技术>过程中,对书中程序代码Thread.currentThread()与this的区别有点混淆,这里记录下来,加深印象与理解. 具体代码如下: pub ...

  8. YOLO 从数据集制作到训练

    1.图片数据集收集 共 16种 集装箱船 container ship 散货船 bulker 油船 tanker 游轮 / 客轮 / 邮轮 passenger liner 渔船 fishing boa ...

  9. python入门学习：5.字典

    python入门学习:5.字典 关键点:字典 5.1 使用字典5.2 遍历字典5.3 嵌套 5.1 使用字典   在python中字典是一系列键-值对.每个键都和一个值关联,你可以使用键来访问与之相关 ...

  10. [JXOI2018]游戏

    嘟嘟嘟 九条可怜竟然有这种良心题,似乎稍稍刷新了我对九条可怜的认识. 首先假设我们求出了所有必须要筛出来的数m,那么\(t(p)\)就只受最后一个数的位置影响. 所以我们枚举最后一个数的位置,然后用组 ...