background

2024-01-16 13:39| 来源: 网络整理| 查看: 265

给定背景图像位置的百分比偏移量是相对于容器的。值 0% 表示背景图像的左（或上）边界与容器的相应左（或上）边界对齐，或者说图像的 0% 标记将位于容器的 0% 标记上。值为 100% 表示背景图像的右（或下）边界与容器的右（或下）边界对齐，或者说图像的 100% 标记将位于容器的 100% 标记上。因此 50% 的值表示水平或垂直居中背景图像，因为图像的 50% 将位于容器的 50% 标记处。类似的，background-position: 25% 75% 表示图像上的左侧 25% 和顶部 75% 的位置将放置在距容器左侧 25% 和距容器顶部 75% 的容器位置。

基本上发生的情况是从相应的容器尺寸中减去背景图像尺寸，然后将结果值的百分比用作从左（或顶部）边界的直接偏移量。

(container width - image width) * (position x%) = (x offset value) (container height - image height) * (position y%) = (y offset value)

以 X 轴为例，假设我们有一个 300px 宽的图像，我们在一个 100px 宽的容器中使用它，background-size 设置为 auto：

100px - 300px = -200px (container & image difference)

因此，位置百分比为 -25%、0%、50%、100%、125%，我们得到这些图像到容器边界偏移值：

-200px * -25% = 50px -200px * 0% = 0px -200px * 50% = -100px -200px * 100% = -200px -200px * 125% = -250px

因此，对于我们的示例，使用这些结果值，让图像的左边界从容器的左边界偏移：

+ 50px（将图像左边界放在 100px 宽容器的中心） 0px（图像左边界与容器左边界重合） -100px (将图片相对容器左移 100px，这意味着图片中部的 100px 内容将出现在容器中) -200px (将图片相对容器左移 200px，这意味着图片右部分的 100px 内容将出现在容器中) -250px (将图片相对容器左移 250px，这意味着图片的右边界对齐容器的中线)

值得一提的是，如果你的 background-size 等于给定轴的容器大小，那么该轴的百分比位置将不起作用，因为“容器图像差异”将为零。你将需要使用绝对值进行偏移。

【本文地址】

公司简介

联系我们