css精灵(CSS sprites),是一种网页图片应用处理技术。主要是指将网页中需要的零星的小图片集成到一个大的图片中
应用的原因：
1.减少对浏览器的请求次数，避免网页的延迟
2.方便小图标的统一管理
精灵图的制作：
1.软件：ps
2.制作方法：
新建透明图层
添加参考线将画布划分，将小图标放入划分好的格子中
精灵图的使用： css精灵图需要配合背景的图片和背景定位
1.引入精灵图
.basic{
background-image:url(ui.png)
width:80px
height:80px
background-repeat:no-repeat
display:inline-block
}
2.精确定位需要显示的小图标坐标
.sprite1{
background-position:80px 0px
}
.sprite2{
background-position:160px 160px
}
1.如何设置标签的背景颜色?
1.如何设置背景图片?
注意点:
1.如何控制背景图片的平铺方式?
应用场景:可以通过背景图片的平铺来降低图片的大小, 提升网页的访问速度
1.如何控制背景图片的位置?
注意点:同一个标签可以同时设置背景颜色和背景图片, 如果颜色和图片同时存在, 那么图片会覆盖颜色
1.背景属性缩写的格式
2.注意点：background属性中， 任何一个属性都可以被省略
3.什么是背景关联方式？
4.如何修改背景关联方式？
1.背景图片和插入图片区别?
1.什么是CSS精灵图
CSS精灵图是一种 图像合成技术
2.CSS精灵图作用
可以减少请求的次数, 以及可以降低服务器处理压力
3.如何使用CSS精灵图
CSS的精灵图需要配合背景图片和背景定位来使用
如何用css精确定位小图片的位置
首先设置固定图片的css属性是background-attachment
background-attachment它有两个属性值fixed/scroll
background-attachment：fixed表示固定图片，图片不随着页面滚动而滚动。
background-attachment：scroll；表示不固定图片，图片随着页面滚动而滚动
background-position这个属性用来定位图片的位置。
我们重点给大家分享background-position这个属性
2background-position的语法结构，用水平和垂直位置进行定位。
background-position:x y
其中，x有三个值：left(左)，center(中),right(右)。用来设置水平位置；
y也有三个值：top（上）,center(中)，bottom(下)。用来设置垂直位置；
两个属性值得中间一定要用英文的空格 ，隔开。
代码如下：
<style type="text/css">
<!--
#img{
background-image:url("图片存放路径") /*插入背景图*/
background-repeat:no-repeat /*设置图片不重复*/
background-color:#00ffff /*设置背景颜色*/
background-position:left center /*用居中对齐设置水平距离，用下面对齐设置垂直距离*/
width:400px height:150px /*设置宽度 和高度*/
}
-->
</style>
<div id="img"></div>
3background-position:左边距离 上边距离。这个用来找图片。
比如一张大图上面有很多小图，你只想用到其中一个小图就用这个找。
代码如下：
<html>
<head>
<style type="text/css">
#main{
{
background-image:url("图片存放路径") /*插入背景图*/
background-repeat:no-repeat /*设置图片不重复*/
background-color:#00ffff /*设置背景颜色*/
background-position:60px 50px /*设置水平距离和垂直距离*/
width:400pxheight:200px
}
</style>
</head>
<body>
<div id="main"></div>
</body>
</html>
![[前端][CSS] 纯css实现纵向滚动固定表头与横向内容滚动](/aiimages/%5B%E5%89%8D%E7%AB%AF%5D%5BCSS%5D+%E7%BA%AFcss%E5%AE%9E%E7%8E%B0%E7%BA%B5%E5%90%91%E6%BB%9A%E5%8A%A8%E5%9B%BA%E5%AE%9A%E8%A1%A8%E5%A4%B4%E4%B8%8E%E6%A8%AA%E5%90%91%E5%86%85%E5%AE%B9%E6%BB%9A%E5%8A%A8.png)
