CSS——精灵图与背景图片定位
精灵图产生背景：
1、网页上的每张图像都需要向服务器发送一次请求才能展现给用户。
2、网页上的图像过多时，服务器就会频繁地接受和发送请求，大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（CSS Sprites）
精灵图的定义：
1、很多图片融合在一张图上，通过背景定位的方式将图标显示在每个盒子中。
2、背景定位的方式主要通过控制x和y轴的值。
精灵图使用技巧：
1、一般情况：直接一个盒子，里面的背景图片是精灵图，使用时注意x轴和y轴。
2、特殊情况：盒子中有一个小图标，此时，小图标外套一个标签（i标签或者span），给小图标设置定位后（自动转成行内块）定义宽高，这个宽高就是精灵图中的小图的宽高，然后注意x轴和y轴的值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
width: 68px;
height: 30px;
background: url("qq.png") -877px -201px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
CSS——精灵图与背景图片定位的更多相关文章
- 移动端适配之雪碧图(sprite)背景图片定位
为了减少网络请求个数量,提高网站的访问速度,我们一般都会把一些小的图片合并成一张sprite图,然后根据background-position来进行定位.在web端由于是固定的大小与left .top ...
- CSS背景图片定位
原文:CSS背景图片定位 在网页开发中我们经常需要对图片进行分割(如下图)来使用,而不是分别提供单独的图片来调用,常见的如页面背景,按钮图标等,这样做的好处就是减少请求次数,节省时间和带宽. 对背景图 ...
- CSS常用背景图片定位方法
CSS背景图片定位其实对于每一位学习前端的同学来说,都已经非常熟悉了.网上铺天盖地的最常见的一种方案就是在父元素中relative,然后子元素absolute.这种方案当然好,不过带来的一个缺点就是会 ...
- CSS 背景图像 背景图片定位
背景图片定位 background-position属性可以给背景图片定位. background-position属性有两个值,第一个值是水平位置,第二个值是垂直位置.这两个值可以使用百分比来表示( ...
- 课时102.CSS精灵图（掌握）
我们这节课来介绍一个和背景图片相关的东西,精灵图 1.设么是css精灵图? css精灵图是一种图像合成技术 2.css精灵图作用 可以减少请求的次数,以及可以降低服务器处理压力 3.如何使用css精灵 ...
- css精灵图使用
1. 精灵技术的使用 CSS 精灵其实是将网页中的一些背景图像整合到一张大图中(精灵图),然而,各个网页元素通常只需要精灵图中不同位置的某个小图,要想精确定位到精灵图中的某个小图,就需要使用CSS的b ...
- background的属性和背景图片定位的实例
本文内容: 1.背景图片定位示例 2.background常用的属性值 3.background-repeat新增的round.space属性 4.background-size的属性值(着重介绍co ...
- css精灵图&字体图标
精灵图 为什么需要精灵图 为了有效的减少服务器接收和发送请求的次数,提高页面的加载速度.出现了CSS精灵技术 精灵图(sprites)的使用 精灵技术主要针对背景图片.就是把多个小背景图片整合到一张大 ...
- CSS精灵图与字体图标
CSS精灵图与字体图标 1. 精灵图 当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户.然而,一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多 ...
随机推荐
- 洛谷—— P2919 [USACO08NOV]守护农场Guarding the Farm
https://www.luogu.org/problem/show?pid=2919 题目描述 The farm has many hills upon which Farmer John woul ...
- Ubuntu 16.04下使用gcc输出汇编的.0文件为可执行文件时出现：`_start'被多次定义
错误如下: `_start'被多次定义 /usr/lib/gcc/x86_64-linux-gnu/5/../../../x86_64-linux-gnu/crt1.o:(.text+0x0):第一次 ...
- Java的23种设计模式（转）
设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是为了可重用代码.让代码更容易被他人理解.保证代码可靠性. 毫无疑问,设计模式于 ...
- 一个简单的js队列，逻辑很清晰
function Queue(type) { //type 是否是一个接着一个执行 function QueueConst() {} QueueConst.execute_ing=[], QueueC ...
- 移动智能设备功耗优化系列--前言（NVIDIA资深project师分享）
本文是嵌入式企鹅圈原创团队成员.NVIDIA资深开发project师Terry发表的第一篇文章,其将对"移动智能设备功耗优化"这个专题展开一个系列的总结分享. Terry毫无保留地 ...
- python集合可以进行相减
python集合可以进行相减 student = {'tom','jim','mary','tom','jack','rose'} print(student) print('rose' in stu ...
- Spring注解配置定时任务<task:annotation-driven/>
http://m.blog.csdn.net/article/details?id=50945311 首先在配置文件头部的必须要有: xmlns:task="http://www.sprin ...
- Windows 文件夹修改为exe的原理和解决办法
有关文件夹后缀改为exe的病毒 该病毒之前出现过,不过没多长时间便消失了,最新的这个应该是变种,下面解决一下该病毒在移动存储设备中的问题: 该病毒并不具备能够将文件夹改为文件的能力,只是将原有文件夹全 ...
- 你不知道的JavaScript--Item34 大白话解说Promise
去年6月份. ES2015正式公布(也就是ES6.ES6是它的乳名),当中Promise被列为正式规范.作为ES6中最重要的特性之中的一个,我们有必要掌握并理解透彻.本文将由浅到深,解说Promise ...
- tomcat管理员password设置
打开tomcat安装文件夹下的conf,然后打开tomcat-users.xml 在标签中加入 <user name="" password="" rol ...