第9天:CSS精灵图

今天重点学习了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;显示图标。向右向下为正值。向左向上移为负值。

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

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>精灵图练习</title>
 6     <style>
 7         .box{
 8             height:138px;
 9         }
10         .box span{
11             float: left;
12             display: block;
13             height:138px;
14         }
15         .d{
16             width:112px;
17             height:127px;
18             background: url(timg.jpg) no-repeat -527px -42px;
19         }
20         .e{
21             width:100px;
22             height:134px;
23             background: url(timg.jpg) no-repeat -707px -34px;
24         }
25         .n{
26             width:113px;
27             height:130px;
28             background: url(timg.jpg) no-repeat -14px -391px;
29         }
30         .g{
31             width:133px;
32             height:146px;
33             background: url(timg.jpg) no-repeat -22px -201px;
34         }
35         .l{
36             width:99px;
37             height:134px;
38             background: url(timg.jpg) no-repeat -767px -211px;
39         }
40         .box1{
41             padding-top: 20px;
42         }
43         .box1 span{
44             display: block;
45             float:left;
46             height:165px;
47         }
48         .D{
49             width:78px;
50             height:167px;
51             background: url(timg1.jpg) no-repeat -587px -10px;
52         }
53         .E{
54             width:76px;
55             height:167px;
56             background: url(timg1.jpg) no-repeat -706px -8px;
57         }
58         .N{
59             width:76px;
60             height:167px;
61             background: url(timg1.jpg) no-repeat -362px -398px;
62         }
63         .G{
64             width:76px;
65             height:167px;
66             background: url(timg1.jpg) no-repeat -311px -202px;
67         }
68         .L{
69             width:85px;
70             height:167px;
71             background: url(timg1.jpg) no-repeat -138px -396px;
72         }
73     </style>
74 </head>
75 <body>
76     <div class="box">
77         <span class="d"></span>
78         <span class="e"></span>
79         <span class="n"></span>
80         <span class="g"></span>
81         <span class="l"></span>
82         <span class="e"></span>
83     </div>
84     <div class="box1">
85         <span class="D"></span>
86         <span class="E"></span>
87         <span class="N"></span>
88         <span class="G"></span>
89         <span class="L"></span>
90         <span class="E"></span>
91     </div>
92 </body>
93 </html>

运行效果:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端萌媛的成长之路

CSS常见布局

20220
来自专栏BestSDK

9种最经典的导航模式,APP开发必备

一、标签式导航 标签式导航又称为tab式导航,现在大多数app采取的主流形式,一般分为底部导航、顶部导航、底部和顶部双tab导航 1、底部标签导航 底部导航一般...

53090
来自专栏地方网络工作室的专栏

CSS3 做一个有闪光效果的进度条

CSS3 做一个有闪光效果的进度条 今天刚入职的小前端看到一个进度条的效果,想要实现,但是不知道如何下手,于是,我写了一个demo给它看下。 最终效果:CSS3...

27480
来自专栏Coco的专栏

【前端性能】必须要掌握的原生JS实现JQuery

21030
来自专栏编程坑太多

如何开发适配安卓和iOS双平台的React Native应用

13420
来自专栏姬小光

【第013期】如何查看页面图片尺寸

网页上的元素实际渲染的时候,其实都是方形的。由于很多图片有白色或者透明的背景,对于设计师来说,打开最终的网页并不能看出页面上的图片是否有按自己的设计实现。

11760
来自专栏微信小程序开发

CSS实现多列复杂界面布局

最近做一个云客服项目,可以把多个微信号消息集中到一个客服平台中,方便统一管理,这里就不详细说客服平台的功能。 做为码农,工作职责就是把功能实现了,在此,我简单说...

813130
来自专栏GIS讲堂

Openlayers4中的全屏

Openlayers4中,ol.control.FullScreen()可实现地图的全屏展示,可是当地图的初始化宽度和高度都不是100%的时候,全屏的时候只会宽...

14430
来自专栏儿童编程

正能量猫,到哪哪亮——Scratch发光猫实验

偶然想起一句话“请保持你心里的光,因为你不知道谁会借此走出黑暗。”心里小感动,决定用Scratch表达一下,于是有了本案例中走哪哪亮的正能量猫。 效果如下:

12120
来自专栏互联网杂技

移动前端开发之viewport的深入理解

在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta...

42350

扫码关注云+社区

领取腾讯云代金券