html - 如何相对于背景图像宽度定位元素

Question

注意:我没有 JS 权限。这必须使用 CSS 完成。

我在屏幕右下方放置了一张背景图片 (850 x 1080)。我对图像进行了缩放，使其占据宽度的 38%:

background-position: right bottom;
background-size: 38% auto;
background-attachment: fixed;

现在我想定位另一个元素，无论屏幕大小如何，它始终与背景图像的特定部分对齐。我该怎么做？我目前将它设置在距右侧和底部边缘一定距离处，但这不是我想要的:

height: 220px;
width: 155px;
bottom: 400px;
right: 400px;

My code can be found here ，我试图定位的部分在 :hover + .hide 的定义中(第 12 行)。我要自定义的页面是我的 MyAnimeList profile ，我正在尝试将封面艺术与红色剑状物体的边缘对齐。

Answer 1

由于背景大小根据其容器的宽度而变化，您可以使用百分比边距来定位元素。百分比边距是根据容器的宽度计算的，甚至是顶部/底部边距 ( see here )。

例子:

:hover + .hide{
    position:absolute;
    bottom:0;
    right:0;
    margin-bottom:20%; /* tune this */
    margin-right:20%; /* tune this */
}

这是一个 DEMO