如何相对于背景图像宽度定位元素 [英] How to position an element relative to the background image width

问题描述

注意：我没有JS访问权限。

Note: I do not have JS access. This must be done with CSS.

我在屏幕右下角有一个背景图片（850 x 1080）。我对图像进行了缩放，使其占据了宽度的38％：

I have a background image (850 x 1080) positioned at the bottom right of the screen. I have the image scaled so that it takes up 38% of the width:

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

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

Now I want to position another element such that it always, regardless of the screen size, lines up with a certain part of the background image. How would I go about that? I currently have it set at a set distance away from the right and bottom edge, but this is not what I want:

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

我的代码可以在此处找到，我要定位的部分是：hover + .hide 的定义（第12行） ）。我要自定义的页面是我的 MyAnimeList个人资料，在此我试图整理封面带有红色边缘艺术的剑形东西。

My code can be found here, and the part I'm trying to position is in the definition of :hover + .hide (line 12). The page I'm trying to customize is my MyAnimeList profile, where I'm trying to line up the cover art with the edge of the red sword-looking thing.

推荐答案

随着背景尺寸根据其容器的宽度而变化，您可以使用百分比余量来定位元素。保证金百分比是根据容器的宽度，甚至是顶部/底部保证金（请参阅此处）。

As the background size changes according to the width of it's container, you can use percent margin to position the element. Percent Margins are calculated according to the width of the container, even top/bottom margin (see here).

示例：

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

这里是 演示

Here is a DEMO

这篇关于如何相对于背景图像宽度定位元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！