第9天:CSS精灵图
2024-08-26 19:33:46
今天重点学习了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>
运行效果:
最新文章
- 解决asp.net动态压缩
- 如何自定义ViewGroup
- 将事件绑定在html标签中和js动态绑定的区别
- BZOJ3743 : [Coci2014]Kamp
- 02.Redis主从集群的Sentinel配置
- 实用make最佳实践
- android:minSdkVersion 之我见
- Proteus中MATRIX-8X8 LED灯的连接
- Spring Boot 系列教程7-EasyUI-datagrid
- DNS服务器搭建(主、从、缓)
- ViewPager 滑动一半的判断方法以及左滑右滑判断
- python之MRO和垃圾回收机制
- Java对象在Hibernate持久化层的状态
- css常用的可继承属性和不可继承属性
- 列表与if语句的结合
- nginx 增加 lua模块
- codeforces_1092c
- [Linux]几个armhf的ubuntu源
- 在eclipse中启动Tomcat报端口被占用的错误
- 洛谷 P3241 [HNOI2015]开店 解题报告