关于CSS设置页面背景图的一些疑问

 关于背景图片的位置其background-position设置背景图片的位置有两种方式，一种是是根据像素设置，第二种根据百分比设置，第一种根据像素的位置是很简单的，只是关于百分比这个设置理解特别容易出现误差的，先看看一段简单的代码:

.bg-position{
  background:url(../../public/images/404.jpg) no-repeat;
  margin-top:100px;
  margin-left:100px;
  background-color:#ccc;
  height: 500px;
  width: 800px;
  background-position: 100px 100px;
}

这种状况是能够预见的，以下所示:

网上看了一篇文章说是background-position是依赖于no-repeat的，在repeat的状态下和默认的状态下（默认即为repeat）,background-position是不起做用的，所以本身尝试了一把，看了一下效果:

代码中去掉了no-repeat，一样是能够展现，之前repeat的时候没有注意和background-position结合一块儿，不过如今发现设置background-position以后，咱们不断的调整垂直方向的距离，发现全部的位置变更都是根据正中间的所有显示的图片的位置进行调整，有兴趣的能够尝试一下~

咱们将background-position设置为20% 20%，代码以下:

.bg-position {
    background: url(../../public/images/404.jpg) no-repeat;
    margin-top: 100px;
    margin-left: 100px;
    background-color: #ccc;
    height: 500px;
    width: 500px;
    background-position: 20% 20%;
}

最开始我觉得是最开始的图片位置同样，500*0.2=100,可是事实上却不是这样:

这个百分比不是根据div的宽度来绝对的，而是根据div宽/高和图片的宽/高的差值来决定的:

position-x=（容器宽度-图片宽度）*百分比

position-y=（容器高度-图片高度）*百分比

这样就会理解上图出现的问题，若是想更好的理解一下能够理解图片的20%的点和容器在20%所在的点重合~