css中background-position:的属性值为百分比时的用法

最新推荐文章于 2022-10-09 17:27:29 发布

kbx8916

最新推荐文章于 2022-10-09 17:27:29 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/kbx8916/article/details/53490222

版权

如果定位用的是百分比话，算法比较特殊。我举个例子：

background:#FFF url(image) no-repeat fixed 50% -30%;

这个时候图片应该在容器的什么位置呢,算法公式如下：

图片左顶点距容器左顶点的坐标位置为

x：（容器的宽度-图片的宽度）x 50%

y：（容器的高度-图片的高度）x（-30%）

得到的结果应用坐标法则，差值如果为负数，百分比为正那么运算结果是负值。如果差值为负数，

百分比也为负数，那么运算结果就是正数。总而言之就是这里的运算符合运算法则。把运算的结果带入坐标法则就能得到图片的位置。

比如：容器是width：600px；height：600px；而图片是width：200px；height：200px；

我们用上面的样式，可以得到图片位置为：

x：(600px-200px)*50%

y：(600px-200px)*(-30%)

如下图：

百分数值的表现方式更为复杂。假设你希望用百分数值将图像在其元素中居中，这很容易：

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50% 50%;
  }

这会导致图像适当放置，其中心与其元素的中心对齐。换句话说，百分数值同时应用于元素和图像。也就是说，图像中描述为 50% 50% 的点（中心点）与元素中描述为 50% 50% 的点（中心点）对齐。

如果图像位于 0% 0%，其左上角将放在元素内边距区的左上角。如果图像位置是 100% 100%，会使图像的右下角放在右边距的右下角。

因此，如果你想把一个图像放在水平方向 2/3、垂直方向 1/3 处，可以这样声明：

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:66% 33%;
  }

如果只提供一个百分数值，所提供的这个值将用作水平值，垂直值将假设为 50%。这一点与关键字类似。

background-position 的默认值是 0% 0%，在功能上相当于 top left。这就解释了背景图像为什么总是从元素内边距区的左上角开始平铺，除非您设置了不同的位置值。

关注