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%;
}

最开始我以为是最开始的图片位置一样，500*0.2=100,但是事实上却不是这样:



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

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

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

这样就会理解上图出现的问题，如果想更好的理解一下可以理解图片的20%的点和容器在20%所在的点重合~