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

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