电话
13363039260
css 如何使用精灵图？
2024-01-18 10:54 小编
一、css如何使用精灵图?
介绍如何使用精灵图使用前，我们要先知道什么是精灵图。只有先知道什么是精灵图，了解精灵图的原理了，我们才可是说使用精灵图。
1.什么是css精灵图（sprite）？
css精灵图（sprite）直译为“CSS精灵”，也被称为通常被解释为“CSS图像拼合”、“CSS贴图定位”或“CSS图片精灵”、“CSS雪碧图”，是一种网页图片应用处理方式。其实就是把一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。
2.使用css精灵图（sprite）的方法
css精灵图（sprite）其实就是通过将多个图片融合到一张图里面，然后通过CSSbackground背景定位技术技巧布局网页背景。在需要用到图片的时候，现阶段是通过CSS属性background-image组合background-repeat,background-position等来实现图片的显示。
3.代码实现：
使用到的精灵图（sprite）素材：incn.png
icno.png
代码：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>文子居中</title>
<style>
*{
margin:0;
padding:0;
}
.sprites{
width:200px;
margin:50pxauto;
}
.spritesdiv{
margin:5px;
}
.spritesspan{
float:left;
width:20px;
height:20px;
background-image:url(icno.png);//引用精灵图（sprite）：incn.png
background-size:60px40px;
}
.sprites1{
background-position:00;
}
.sprites2{
background-position:-20px0;
}
.sprites3{
background-position:0-20px;
}
.sprites4{
background-position:-20px-20px;
}
.sprites5{
background-position:-40px0;
}
.sprites6{
background-position:-40px-20px;
}
</style>
</head>
<body>
<divclass="sprites">
<div><spanclass="sprites1"></span>付款图标</div>
<div><spanclass="sprites2"></span>存款图标</div>
<div><spanclass="sprites3"></span>删除图标</div>
<div><spanclass="sprites4"></span>粘贴图标</div>
<div><spanclass="sprites5"></span>笑脸图标</div>
<div><spanclass="sprites6"></span>编辑图标</div>
</div>
</body>
</html>
效果图：
1.jpg
使用到的核心代码：
background-image:url(icno.png);---为sprites里的span元素设置背景图像，引用了精灵图（incn.png）；
background-size:60px40px;---为背景图像调整尺寸大小，使得sprites盒子的span元素的背景图像固定为宽（60px）,高（40px）；
background-position属性---这是最关键的代码，图片定位。设置或检索sprites盒子的span元素的背景图像位置。必须先指定background-image属性才可使用。
说明：背景background-position有两个数值，前一个代表靠左距离值（可为正可为负），第二个数值代表靠上距离值（可为正可为负）。当为正数时，代表背景图片作为对象盒子背景图片时靠左和靠上多少距离多少开始显示背景图片；当为负数时代表背景图片作为盒子对象背景图片，将背景图片拖动超出盒子对象左边多远，拖动超出盒子对象上边多远开始显示此背景图片。
二、关于cssbackground属性其他属性值介绍
background属性除了上述的background-image，background-size，background-position属性值以外，还有其他的属性值，比如：
1.background-color：定义了元素的背景颜色.一般定义的都是纯色的背景。
body{background-color:#b0c4de;}
猜你喜欢
联络方式：
13363039260
微信二维码 