透明度
- opacity，它设置的是整个元素的透明，它的取值是0 ~ 1
- 在颜色位置设置alpha通道(rgba ) 用opacity 的问题是设置后，他是将他自己和他里面的子元素都设置进去了。而通过颜色位置的alpha 可以逐快设置，可以设置自己的，可以设置里面子元素的，可以设置外边框，可以设置自己内容的，使用起来也更灵活。
鼠标
使用cursor设置，不仅可以设置光标的样式，设置光标的大小，还可以把光标样式设置为某个图片。 设置图片可以用下面的代码
cursor: url("imgs/target.ico"), auto;
盒子隐藏
- display:none，不生成盒子
- visibility:hidden，生成盒子，只是从视觉上移除盒子，盒子仍然占据空间。 上下两种的最重要区别是什么呢？第一个是不生成盒子，不生成盒子也就是不占据空间，就当空气一样不存在。 而下面的方式是要生成盒子，生成盒子必然会占据空间，下面可以理解为只是隐身了。
背景图
和img元素的区别
img元素是属于HTML的概念
背景图属于css的概念
- 当图片属于网页内容时，必须使用img元素
- 当图片仅用于美化页面时，必须使用背景图
上面的区别是最重要的区别，何时使用img，何时使用背景图，就取决一点是用网页内容还是美化网页的。如果是网页内容就用img,如果是美化网页就用背景图。
涉及的css属性
-
background-image 设置图片，需要注意一点就是图片的相对路径不要写错了。
-
background-repeat
默认情况下，背景图会在横坐标和纵坐标中进行重复
- background-size
预设值：contain、cover，类似于object-fit 数值或百分比 contain,cover 是粗略控制，可以通过数值或者百分比精确控制。
- background-position
设置背景图的位置。
预设值：left、bottom、right、top、center
数值或百分比
雪碧图（精灵图）（spirit） 精灵图的使用
div{
width:30px;
height: 30px;
background-image: url("imgs/icon.png");
background-repeat: no-repeat;
background-position: -47px -38px;
}
精灵图一共要设置上面几个属性：
- 设置宽高
- 设置图片
- 设置位置
除了可以用上面的去精准控制，在设置 background-position 还可以通过设置left、bottom、right、top、center 去设置。
- background-attachment
通常用它控制背景图是否固定。 背景图固定和不固定的到底什么区别？有什么不一样的地方？
-
背景图和背景颜色混用
-
速写（简写）background
