backgroundposition属性的取值方法,background-position属性用来设置

background-position如何影响背景图的展示

　　这两天我在项目里更换首页图片的时候发现了一个问题。以前的样式设置背景-位置：中心，当页面缩小或放大时，背景图片中显示的区域也会发生变化。现在，页面被更改为左上方后，图像位置没有移动。这也不对。background-position:center不是从元素的中心显示背景图像吗？为什么它仍然占据所有的元素区域？这个中心是指背景图像的中心还是元素的中心？

background-position属性

　　 background-position是设置背景图像起始位置的set属性，分别为background-position-x和background-position-y。可用值包括左、右、上、下、固定像素值和百分比值。

　　背景-位置-x:左侧(相当于0%)背景-位置-x:右侧(相当于100%)背景-位置-y:顶部(相当于0%)背景-位置-x:底部(相当于100%)抛开固定像素值定位，那么这次主要探讨百分比值对背景图像位置的影响。正常情况下，百分比值应该是相对于元素宽度和高度的百分比，但实际性能并非如此。

设置为百分比值的实际情况

　　注意：用作背景元素容器的元素的宽度和高度设置为100%和100%，没有边框和填充。

　　示例1:

　　背景-尺寸：100px 100px背景-职位：100% 100%；可以看出，当背景位置设置为100%时，背景图像显示在窗口的右下角，而不是溢出元素区域。

　　接下来，改变位置

　　示例2:

　　背景-尺寸：100px 100px背景-职位：50% 50%；如您所见，背景图像现在位于元素的中心。为了证明它在中心，我用了一个居中样式的子元素进行对比，可以看出它正好是子元素框架柱。

　　从上面两个例子可以看出：

　　当background-position设置为100% 100%，图片在右下角时，那么background-position-x的像素值等于“容器元素的宽度减去背景图像的宽度”，background-position-y的像素值等于“容器元素的高度减去背景图像的高度”；

　　当background-position设置为50% 50%，图片在元素内部居中时，那么background-position-x的像素值等于“容器元素的宽度值乘以50%减去背景图像的宽度的50%”，background-position-y的像素值等于“容器元素的高度值乘以50%减去背景图像的高度的50%”；

　　如果W代表容器元素的宽度，H代表容器元素的高度，bw代表背景图像的宽度，bh代表背景图像的高度，这样的公式可以从上面的两个例子得到：

　　背景-位置-x:百分比=(宽-宽)*百分比背景-位置-y:百分比=(高-宽)*填充元素的百分比：

　　填充：100px 20px 50px 50px背景-位置：0% 0%；可以看到背景图片在填充区域的左上角，所以background-position的百分比实际上参与了容器元素宽度和高度=内容填充的计算。

　　如果背景图像的背景尺寸设置为100% 100%,则无论背景位置设置为多少百分比，它都不会偏移。

　　相反，如果背景图像尺寸大于元素尺寸，则在设置百分比后会出现负偏移。

　　好了，现在我终于明白这个属性了。有些css属性的描述不够准确，容易造成误解。还是要自己实践才能知道真相！

　　这就是本文关于在背景位置属性中使用百分比值的全部内容。有关背景位置百分比值的更多信息，请搜索以前的文章或继续浏览下面的相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。