背景
雪碧图
- 当我们第一次使用按钮时，在按钮上会有这种闪烁的现象出现
- 这是因为，浏览器在加载外部资源时，是以懒加载的形式来完成的
- 像hover active这些图片都是在按钮状态触发时才加载的，网速即使再快也需要时间来完成加载
- 在图片加载完成前，超链接处在没有背景图片可以显示的状态，所以会显示空白
- 我们可以通过CSS-Sprite来解决这个问题
- 所谓CSS-Sprite就是指将多个小的图片统一放入到一个大图片（雪碧图）中，然后通过偏移量来切换不同的图片
- 使用CSS-Sprite可以将多个小图片进行整合，减少客户端发送请求的次数，提升用户体验
- 在早期的网页中，几乎所有的小图标都是通过雪碧图来实现的，随着图标字体的广泛应用，雪碧图的使用也变得相对少了一些
- 雪碧图
- 雪碧图是位图，位图放大后会失真
- 雪碧图无法修改颜色
- 雪碧图支持彩色图标
- 图标字体
- 图标字体是矢量图，可以任意放大缩小不会失真
- 图标字体可以任意修改颜色
- 图标字体只支持单色图标
- background-repeat 背景的重复方式
- 可选值：
- repeat 默认值，背景图片会沿元素的水平垂直双方向重复
- repeat-x 水平方向重复
- repeat-y 垂直方向重复
- no-repeat 不重复
- space 背景图片充满元素，无法完整充满使用空白隔开
- round 背景图片自动缩放以充满元素
- background-position 设置背景图片的位置
- 可选值：
- top bottom left right center
- background-position：水平偏移量 垂直偏移量
- 可以从上述关键字中任意选两个来设置背景图片的位置
- 如果只传了一个关键字，则第二个默认就是center
- background-size 用来设置背景图片的尺寸
- background-size: 宽 高
- 可选值：
- contain 缩放图片使得图片可以在元素中完整显示，元素有的地方可能不显示背景
- cover 缩放图片使得图片可以将元素撑满，图片可能显示不全
- background 简写属性，可以同时设置所有的背景相关的样式
- background: #bfa url() no-repeat 400px 400px/cover
- background-clip 设置背景图片显示的区域
- 可选值：
- border-box 默认值，背景会延伸到边框的下边
- padding-box 背景会延伸到内边距下
- content-box 背景只会在内容区显示