<!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. shell编程—简单的使用（二）

    使用shell编辑.sh使其输出hello tynam 1.新建一个.sh文件,然后进行编辑 vi hello_tynam.sh 2.进行编辑,先按i键进行激活,然后输入echo hello tyna ...

  2. 用cmd命令行编译JAVA程序时出现“找不到或无法加载主类”

    今天复习Java基础知识时,使用cmd命令窗口进行编译Java文件发现了如下问题: 网上有很多的解决方法,和问题出现的讨论,以下方法是解决我出现这个问题方式. 解决方式: 重点是圈住的部分. 下面是我 ...

  3. c/c++连通图的遍历(深度遍历/广度遍历)

    连通图的遍历(深度遍历/广度遍历) 概念:图中的所有节点都要遍历到,并且只能遍历一次. 深度遍历 广度遍历 深度遍历 概念:从一个给定的顶点开始,找到一条边,沿着这条边一直遍历. 广度遍历 概念:从一 ...

  4. fedora 28/29 配置 C++ 环境

    最近 使用C++ 开发 更换机器的时候,还要重新配置一下 gnu 工具链.于是简单进行了安装了一下: yum install gcc yum install gcc-c++ yum install g ...

  5. Linux下键盘值 对应input_evnet的code值。

    最近做了一个linux下面的模拟鼠标和键盘的app,但不是很清楚字符对应的键值:查找内核源码,在kernel/include/uapi/linux/input.h文件中找到: 下面给出普通键盘上面对应 ...

  6. Linux-centos7超过2TB使用parted命令分区

    介绍说明: parted的操作都是实时的,也就是说你执行了一个分区的命令,他就实实在在地分区了, 而不是像fdisk那样,需要执行w命令写入所做的修改, 所以进行parted的测试千万注意不能在生产环 ...

  7. numpy中stack、hstack，vstack，dstack函数功能解释

    https://blog.csdn.net/Riverhope/article/details/78922006 https://blog.csdn.net/ygys1234/article/deta ...

  8. 【算法】LeetCode算法题-Roman To Integer

    这是悦乐书的第145次更新,第147篇原创 今天这道题和罗马数字有关,罗马数字也是可以表示整数的,如"I"表示数字1,"IV"表示数字4,下面这道题目就和罗马数 ...

  9. 远程连接ubuntu的MongoDB遇到的坑

    首先连接不上,先查看云服务器上的安全组是否添加了对应的端口 如果打开了,那么久查看MongoDB是否允许远程连接 # mongod.conf # for documentation of all op ...

  10. Spring缓存注解@Cacheable、@CacheEvict、@CachePut使用

    从3.1开始,Spring引入了对Cache的支持.其使用方法和原理都类似于Spring对事务管理的支持.Spring Cache是作用在方法上的,其核心思想是这样的:当我们在调用一个缓存方法时会把该 ...