标签：没有 提高 水平 资源加载 重复 外部 tom 触发按钮 浏览器
1、设置背景样式：
background-color：#bfa； // 设置背景颜色
background-image：url(相对路径)； // 设置背景图片
2、可以同时给一个元素指定背景颜色和背景图片，背景颜色会作为背景图片的底色
background-repeat：repeat； // 设置背景图片的重复方式
可选值：
repeat，默认值，背景图片会双方向重复（平铺）
no-repeat，背景图片不会重复，有多大就显示多大
repeat-x，背景图片沿水平方向重复
repeat-y，背景图片沿垂直方向重复
3、背景图片默认值贴着元素的左上角显示，通过 background-position 可以调整背景图片在元素中的位置
可选值：
1. 该属性可以使用 top 、right 、left 、bottom 、center 中两个值来指定背景图片的位置
top left 左上
bottom right 右下
如果值给出一个值，则第二个值默认是 center
2. 也可以直接指定两个偏移量：background-position：100px 0px； // 水平向右移动100个像素，垂直方向不动
第一个值是水平偏移量：正值，图片向右移动指定像素
负值，图片向左移动指定像素
第二个值是垂直偏移量：正值，图片向下移动指定像素
负值，图片向上移动指定像素
3. background-attachment 用来设置背景图片是否随页面一起滚动
可选值：
scroll，默认值，背景图片随窗口滚动
fixed，背景图片会固定在某一位置，不随页面滚动
当背景图片的 background-attachment 设置为 fixed 时，背景图片的定位永远相对于浏览器的窗口
4、外部资源加载时，并不是同时加载，浏览器会在资源被使用才去加载资源（例如多张背景图片，点击更换效果）
当触发按钮时，浏览器加载图片需要一定的时间，所以加载和显示过程会有一段时间，背景图片无法加载，导致出现闪烁的情况
为了解决多张图片不能同时加载出现闪烁的问题，可以把三张图片整合为一张图片，
使用 background-position 来切换显示的图片位置，这种技术叫做图片整合技术（CSS-Sprite）
优点：
1.将多张图片整合为一张图片里，浏览器只需要发送一次请求，可以同时加载多个图片
提高访问效率，提高用户的体验
2.讲多个图片整个为一张图片，减小图片的总大小，提高请求速度，增加用户体验
5、background 通过该属性可以同时设置所有背景相关的样式，没有顺序要求，也没有数量要求，不写的样式使用默认值。
background：#bfa url(../img/3.png) center center no-repeat fixed ；
标签：没有 提高 水平 资源加载 重复 外部 tom 触发按钮 浏览器
原文地址：https://www.cnblogs.com/qtbb/p/11378793.html
