今天重点学习了CSS精灵图。

“CSS精灵”,英语css sprite,所以也叫做“CSS雪碧”技术。是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分

css精灵有什么优点,就是减少了http请求。比如4张小图片,原本需要4个http请求。但是用了css精灵,小图片变为了一张图,http请求只有1个了。

用ps选框工具选择需要显示的部分,点开信息面板,width和height就是盒子的宽高,鼠标定位到图标的左上角,信息面板显示的x和y的值就是背景定位值,记得加负号。默认左上角为(0,0)

利用背景定位background-position:x y;显示图标。向右向下为正值。向左向上移为负值。

最后做了个小练习拼自己的名字。代码如下:

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>精灵图练习</title>
<style>
.box{
height:138px;
}
.box span{
float: left;
display: block;
height:138px;
}
.d{
width:112px;
height:127px;
background: url(timg.jpg) no-repeat -527px -42px;
}
.e{
width:100px;
height:134px;
background: url(timg.jpg) no-repeat -707px -34px;
}
.n{
width:113px;
height:130px;
background: url(timg.jpg) no-repeat -14px -391px;
}
.g{
width:133px;
height:146px;
background: url(timg.jpg) no-repeat -22px -201px;
}
.l{
width:99px;
height:134px;
background: url(timg.jpg) no-repeat -767px -211px;
}
.box1{
padding-top: 20px;
}
.box1 span{
display: block;
float:left;
height:165px;
}
.D{
width:78px;
height:167px;
background: url(timg1.jpg) no-repeat -587px -10px;
}
.E{
width:76px;
height:167px;
background: url(timg1.jpg) no-repeat -706px -8px;
}
.N{
width:76px;
height:167px;
background: url(timg1.jpg) no-repeat -362px -398px;
}
.G{
width:76px;
height:167px;
background: url(timg1.jpg) no-repeat -311px -202px;
}
.L{
width:85px;
height:167px;
background: url(timg1.jpg) no-repeat -138px -396px;
}
</style>
</head>
<body>
<div class="box">
<span class="d"></span>
<span class="e"></span>
<span class="n"></span>
<span class="g"></span>
<span class="l"></span>
<span class="e"></span>
</div>
<div class="box1">
<span class="D"></span>
<span class="E"></span>
<span class="N"></span>
<span class="G"></span>
<span class="L"></span>
<span class="E"></span>
</div>
</body>
</html>

运行效果:

第9天:CSS精灵图的更多相关文章

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

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

  2. Css - 精灵图

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

  3. css雪碧图-css精灵图

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

  4. CSS背景和精灵图

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

  5. H5 40-CSS精灵图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  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. Java IO在实际开发中的应用

    IO是java绕不过去的槛,在开发中io无处不在, 正如同 世界上本没有路,java io写多了,也就知道了大体是什么意思,在读完thinking in java 感觉就更清晰了,结合具体的业务场景, ...

  2. Kafka基础知识

    1. kafka是一个分布式的消息发布-订阅队列.2. 其中有一些主要的概念: Topic: 就是对放入队列的消息进行分类,分类消息分开储存,比如现在有订单消息和用户投诉消息,则分成订单topic和投 ...

  3. Oracle查询多行数据合并成一行数据

    例如: select base_id, translate (ltrim (text1, '/'), '*/', '*,') xmmc,translate (ltrim (text2, '/'), ' ...

  4. java在控制台输出空心正方形,菱形,空心菱形

     使用for和if打印一个空心正方形 /*思路:要想打印一个5x5的空心正方形,首先它的第一横行和最后一行都是填满的,需要全部遍历出来,第二三四行和只有左右两条边是出来的,中间部分为空的.因此在打印第 ...

  5. php+xdebug+phpstorm(mac os x+homebrew)

    今天研究了下用phpstorm做xdebug调试,首先申明本人电脑是mac系统,软件包管理用的是homebrew,phpstorm用的是2016.3.2版本,php56,xdebug2.5.1,希望对 ...

  6. Unreal Engine 4(虚幻UE4)GameplayAbilities 插件入门教程(七)Ability的信息传递等

    本节及后面的内容将会探索更加有意思的内容,更加逼近实际的使用的内容.我们本节内容不难,讲的是释放Ability时的信息传递: 第一步:创建一个GA称为GA_AOE_BlindVengeance,复仇忌 ...

  7. bash脚本基础

    1.bash特性之命令补全与路径补全 命令补全:敲击Tab按键 shell程序在接收到用户执行命令的请求且分析完成后,最左侧字符串将被当作命令去分析$PATH标量所指定的各路径下去查找 查找机制: 1 ...

  8. linux下 git 安装

    1.使用yum安装 yum -y install git yum remove git 2.源代码安装 a.下载git源码  网址为 https://github.com/git/git/releas ...

  9. Java 接口-抽象类解析

    对于面向对象编程,抽象是它的三大特征(抽象.继承.多态)之一.在Java中,可以通过两种形式来体现OOP的抽象:接口和抽象类. 这两者既相似又存异.诸位在初学的时候也会傻傻分不清接口与抽象类的区别,大 ...

  10. (转)Linux服务器安装配置tomcat

    这里首先说明下,Linux下的Tomcat没有32位和64位的区分. tomcat是分windows版本与linux版本的,windows版本一般以exe或者zip格式:linux版本一般以tar.g ...