css中background-position以百分比作值时的参考点是谁

发布网友发布时间：2022-05-13 08:59

共3个回答

懂视网时间：2022-05-13 13:20

今天帮别人调代码时，看到一个样式：

background-position: 50% 0;background-size: 100% auto；

对background-size:100% auto，意思是背景图片宽度为元素宽度*100%，高度等比缩放。详情可见css3 background。

对background-position很自然的以为百分比是根据父元素宽度计算的，但background-position真的不是，它有一套自己的原理。下面详细介绍。

一、等价写法

在看各类教程时有以下等价写法：

top left, left top 等价于 0% 0%.

top, top center, center top 等价于 50% 0%.

right top, top right 等价于 100% 0%.

left, left center, center left 等价于 0% 50%.

center, center center 等价于 50% 50%.

right, right center, center right 等价于 100% 50%.

bottom left, left bottom 等价于 0% 100%.

bottom, bottom center, center bottom 等价于 50% 100%.

bottom right, right bottom 等价于 100% 100%.

那么为什么left,top就等价于0% 0%，right bottom等价于100% 100%呢？

二、background-position百分比计算公式

background-postion:x y;x：{容器(container)的宽度?背景图片的宽度}*x百分比，超出的部分隐藏。y：{容器(container)的高度?背景图片的高度}*y百分比，超出的部分隐藏。

有了这个公式，就很容易理解百分百写法了，推算一下也就很容易理解上面各类等价写法了。

三、举例

1、background-position:center center等价于background-position:50% 50%等价于background-position:?px ?px

例子中用到背景图如下【尺寸：200px*200px】：

背景图在容器中居中。

效果都是让背景图片居中

如上通过设置百分比和关键字能实现背景图居中，如果要实现通过具体值来设置图片居中该设置多少？

根据上面公式：

x=(容器的宽度-背景图宽度)*x百分比=(300px-200px)*50%=50px;

y=(容器的高度-背景图高度)*y百分比=（300px-200px）*50%=50px;

即设置background-postion:50px 50px;

测试一下：

效果同样居中。

热心网友时间：2022-05-13 10:28

这个标签开始的地方，列如如果是div标签，那么div标签开始的地方就是参考开始的地方，当然如果您还有一些有关技术问题可以到后盾人去与技术人员一起讨论问题，解答您的难题

热心网友时间：2022-05-13 11:46

这个标签开始的地方，如果是div标签，那么div标签开始的地方就是参考开始的地方