css - 从两个重叠的 HTML 元素逆向工程 CSS `background-position`

Question

我有一个元素，用户可以在其中指定一个任意图像，稍后用作元素的背景图像。用户必须能够将图像定位在要应用图像的宿主元素中，以确保图像中需要显示的部分实际上是可见部分。

SitePoint notes the following关于 CSS background-position 属性的行为:

Note that when the background-position is defined with a percentage value, that position refers to both the element itself and the corresponding point on the background-image. For example, a background-image with background-position values of 50% 50% will place the point of the image that’s located at 50% of the image’s width and 50% of the image’s height at a corresponding position within the element that contains the image. In the above case, this causes the image to be perfectly centered. This is an important point to grasp—using background-position isn’t the same as placing an element with absolute position using percentages where the top-left corner of the element is placed at the position specified.

假设您有两个 HTML 元素。第一个是一个大元素，表示稍后用作背景位置的图像。第二个是位于第一个元素之上的较小元素，代表将来要应用背景图像的元素。

+-----------------------+ <-- Y1
| Image Placeholder     |
|                       |
| +-----------------------+ <-- y1
| | Container Placeholder |
| +-----------------------+ <-- y2
|                       |
|                       |
|                       |
|                       |
|                       |
|                       |
+-----------------------+ <-- Y2

给定每个元素的顶部和底部的 y 坐标，如何计算正确的百分比以保持图像的正确部分在应用了背景图像的最终元素中可见？

Answer 1

让我们采用原始可视化，为我们正在寻找的百分比位置的两个点添加变量:

      +-----------------------+ <-- Y1
      | Image                 |
      |                       |
      |         +-----------------------+ <-- y1
Y3 -->|   y3 -->| Container             |
      |         +-----------------------+ <-- y2
      |                       |
      |                       |
      |                       |
      |                       |
      |                       |
      |                       |
      +-----------------------+ <-- Y2

根据定义，这两点(图像上的一个点和容器上的一个点)必须位于同一位置。这两个百分比必须相等。因此:

下一步似乎是定义这两个目标点。假设其左上角位于坐标 [0,0] 处，这证明对于两个元素中较大的一个更容易:

其中 p 表示我们正在寻求的百分比。

这个等式看起来几乎适用于较小的元素，除了这个元素不是从点 [0,0] 开始。相反，它从点 [x1,y1] 开始。 (我们可以安全地忽略它的 x 原点，因为我们只关心 y 百分比。)

校正此偏移量可得出以下等式:

代入我们原来的等式，我们得到:

现在剩下的就是求解p；完成后，我们得到了这个最终等式:

Here是a jsfiddle example这个等式的作用。上下拖动黄色元素可以看到动态计算的百分比(输出在图像下方)。红色刻度线是相同百分比的视觉指示器。