CSS-background-position百分比

关于背景图片的位置其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%;
}