css中有一个background-position 属性设置背景图像的起始位置。
他有以下可能的值：
1，top left 左上角
2，top center 正上方
3，top right 右上方
4，center left 正左方
5，center center 正中
6，center right 正右方
7，bottom left 左下方
8，bottom center 正下方
9，bottom right 右下方
所以要是背景图居中显示，css里边加上下边这条属性：
background-position:center centerCSS sprites是指把网页中很多小图片（很多图标文件）做成按规律排列的一张大图上，在显示的时候通过background-image、background-position显示图片特定部分达到和分散的一张张小图片一样的效果。
作用：
作用：background-size设置 背景图像的大小尺寸 。
一、margin和width实现水平居中
优点： 实现方法简单易懂，浏览器兼容性强；
缺点： 扩展性差，只能针对已知宽度的div，无法自适应未知项情况。
)
二、inline-block实现水平居中方法
做点： 简单易懂，扩展性强；
缺点： 需要额外处理inline-block的浏览器兼容性。
1）、opacity作用于元素以及元素内的 所有内容的透明度 ，子元素会继承父元素的 opacity 属性。
2）、rgba()只作用于元素的颜色或其背景色，后代元素不会继承透明性,只是针对自己本身有效，无法使内部的所有元素透明。
方法和详细的操作步骤如下：
1、第一步，打开前端开发工具，然后创建一个新的html代码页，见下图，转到下面的步骤。
2、第二步，执行完上面的操作之后，创建一个div标签以设置html代码页的背景色，然后将class
=“ bg-img”添加到标签中，见下图，转到下面的步骤。
3、第三步，执行完上面的操作之后，设置背景图片，创建一个样式标签，然后设置背景图像、该图像不重复以及标签中bg-img的类的宽度和高度，见下图，转到下面的步骤。
4、第四步，执行完上面的操作之后，保存html代码，然后使用浏览器打开，浏览器上的背景图像将显示在左上角，见下图，转到下面的步骤。
5、第五步，执行完上面的操作之后，返回html代码页，在bg-img类中添加background-position：center属性，见下图，转到下面的步骤。
6、第六步，执行完上面的操作之后，保存html代码并刷新浏览器，会发现浏览器上的背景图像已自动水平居中，见下图。这样，就解决了这个问题了。
