如何将元素相对于背景图像的宽度进行定位

Question

3

注意：我没有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;

我的代码可以在这里找到, 我试图定位的部分在:hover + .hide的定义中（第12行）。我试图自定义的页面是我的MyAnimeList个人资料，我想把封面艺术与红色剑形物的边缘对齐。

- almk

类似这样的内容？ https://dev59.com/Z2gu5IYBdhLWcg3wso6i - user4110695

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- web-tiki · Accepted Answer

随着背景大小根据其容器的宽度变化，您可以使用百分比边距来定位元素。百分比边距是根据容器的宽度计算的，即使顶部/底部边距也是如此（请参阅此处）。

例如：

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

这里有一个演示