css设置背景图⽚_css如何使⽤精灵图？background属性介绍
（代码实例）
本章给⼤家介绍css 怎样使⽤精灵图？background属性介绍（代码实例），让⼤家可以了解css精灵图（雪碧图）是怎样使⽤的。有⼀定的参考价值，有需要的朋友可以参考⼀下，希望对你有所帮助。
margin属性怎么用程序猿的⽣活：web前端全栈资料粉丝福利（⾯试题、视频、资料笔记、进阶路线）z huanlan.zhihu
⼀、css 如何使⽤精灵图?
介绍如何使⽤精灵图使⽤前，我们要先知道什么是精灵图。只有先知道什么是精灵图，了解精灵图的原理了，我们才可是说使⽤精灵图。
1. 什么是css精灵图（sprite）？
css精灵图（sprite）直译为“CSS精灵”，也被称为通常被解释为“CSS图像拼合”、“CSS贴图定位”或“CSS图⽚精灵”、“CSS雪碧图”，是⼀种⽹页图⽚应⽤处理⽅式。其实就是把⼀个页⾯涉及到的所有零星图⽚都包含到⼀张⼤图中去，这样⼀来，当访问该页⾯时，载⼊的图⽚就不会像以前那样⼀幅⼀幅地慢慢显⽰出来了。
2.使⽤css精灵图（sprite）的⽅法
css精灵图（sprite）其实就是通过将多个图⽚融合到⼀张图⾥⾯，然后通过CSS background背景定位技术技巧布局⽹页背景。在需要⽤到图⽚的时候，现阶段是通过CSS属性background-image组合background-repeat, background-position等来实现图⽚的显⽰。
3.代码实现：
使⽤到的精灵图（sprite）素材：incn.png
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>⽂⼦居中</title>
<style>
* {
margin: 0;
padding: 0;
}
.sprites{
width: 200px;
margin: 50px auto;
}
.sprites div {
margin: 5px;
}
.sprites span {
float: left;
width: 20px;
height: 20px;
background-image: url(icno.png);//引⽤精灵图（sprite）：incn.png
background-size: 60px 40px;
}
.
sprites1 {
background-position: 0 0;
}
.sprites2 {
background-position: -20px 0;
}
.sprites3 {
background-position: 0 -20px;
}
.sprites4 {
background-position: -20px -20px;
}
.sprites5 {
background-position: -40px 0;
}
.sprites6 {
background-position: -40px -20px;
}
</style>
</head>
<body>
<div class="sprites">
<div><span class="sprites1"></span>付款图标</div>
<div><span class="sprites2"></span>存款图标</div>
<div><span class="sprites3"></span>删除图标</div>
<div><span class="sprites4"></span>粘贴图标</div>
<div><span class="sprites5"></span>笑脸图标</div>
<div><span class="sprites6"></span>编辑图标</div>
</div>
</body>
</html>
效果图：
使⽤到的核⼼代码：
background-image: url(icno.png);---为sprites⾥的span元素设置背景图像，引⽤了精灵图（incn.png）；
程序猿的⽣活：打造全⽹web前端全栈资料库（总⽬录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新）z huanlan.zhihu background-size: 60px 40px; ---为背景图像调整尺⼨⼤⼩，使得sprites盒⼦的span元素的背景图像固定为宽（60px）,⾼（40px）；
background-position 属性---这是最关键的代码，图⽚定位。设置或检索sprites盒⼦的span元素的背景图像位置。必须先指定background-image 属性才可使⽤。
说明：背景background-position有两个数值，前⼀个代表靠左距离值（可为正可为负），第⼆个数值代表靠上距离值（可为正可为负）。当为正数时，代表背景图⽚作为对象盒⼦背景图⽚时靠左和靠上
多少距离多少开始显⽰背景图⽚；当为负数时代表背景图⽚作为盒⼦对象背景图⽚，将背景图⽚拖动超出盒⼦对象左边多远，拖动超出盒⼦对象上边多远开始显⽰此背景图⽚。
⼆、关于css background属性其他属性值介绍
background属性除了上述的background-image，background-size，background-position 属性值以外，还有其他的属性值，⽐如：1.background-color：定义了元素的背景颜⾊.⼀般定义的都是纯⾊的背景。
body {background-color:#b0c4de;}
效果图：
body {background-color:#b0c4de;}设置整个页⾯的背景颜⾊为：#b0c4de
在CSS中，颜⾊值通常可以⽤以下⽅式定义:
⼗六进制 - 如："#ff0000"；
RGB - 如："rgb(255,0,0)"；
颜⾊名称 - 如："red"。
2. background-repeat：定义了背景图⽚的平铺⽅式（⽔平或垂直平铺，不平铺）。
语法：
background-repeat：repeat-x || repeat-y || no-repeat ;
repeat-x ：⽔平平铺；
repeat-y：垂直平铺；
no-repeat：不平铺。
3. background-attachment：设置背景图像是否固定或者随着页⾯的其余部分滚动。
语法：
background-repeat：scroll || fixed || inherit；
scroll：默认属性，设置背景图⽚随页⾯的其余部分滚动；
fixed ：设置背景图像是固定的；
inherit：指定background-attachment的设置应该从⽗元素继承；
以上就是css 如何使⽤精灵图？background属性介绍（代码实例）的详细内容，更多请关注我！
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论