使用backgroundPosition来定位背景图片

*{
      background:url(背景图片链接) X坐标 Y坐标；
}

如题。

        这个问题大家一定会遇到。当你在制作网页的时候，一开始的背景图一定是每张图都切出来，一个button的hover效果，要准备两张背景图。这种做法主要有两个缺点：

        1.图片在hover的时候会出现切换闪动；

        2.如果要修改背景图，需要同时更换图片和修改源文件中的图片url链接。

        有没有什么好方法能够解决这个问题？

        有的，使用backgroundPosition这个CSS属性来定位背景图的位置即可。

        首先，使用一个HTML文档元素，其高和宽必须预先限定，同时指定其overflow属性为hidden。制作背景图，将所有的图片元素拼接在同一张图片上，最好是png格式。根据你所需要的图片质量修改图片的位深。

         然后在其类属性设置中使用backgroundPosition来实现背景图位置调整。

         backgroundPosition需要配合background来使用：

*{
      background:url(背景图片链接) X坐标px  Y坐标px;
}

        其中，X坐标和Y坐标是以左上角来作为坐标原点的，向下和向右的方向都是负数。

        如果尝试使用js来动态修改图片，则可以通过

        Element.style.backgroundPositionX或者Element.style.backgroundPositionY来修改，例如做hover效果。其表达式接受两种方式传参：

        “30px;”或者“‘30px;’”。