html - CSS：如何固定/固定相对于背景的元素？

Question

我用麻线做任务。更改屏幕尺寸时，我需要所有元素都表现为单个实体对象。现在他们的位置是相互独立的。

在 Twine 中，我可以通过 tw-story（如 .body）管理所有对象，或者使用 tw-passage 进行描述（附加 gif 上的黑色）和 tw-link 答案（gif 上的灰色）

tw-story
{
    background-image: url(../Images/TavernQuest/defentures_quest_back.png);
    background-size: cover;

    font-family: Arial;
    padding: 11% 19%;
    object-fit: cover;

} 

tw-passage {
    color: black;
    max-width: 50%;
    font-size: 1.8vw;
}

tw-link
{
   object-fit: cover;
   font-size: 1.8vw;

   color: grey;
}

如何在窗口大小更改期间在背景上制作元素位置引脚？

这是显示问题的 imgur gif 链接 https://i.imgur.com/5IWS7rq.gifv

Answer 1

试试这个来添加你的 CSS 代码。

tw-story {
    background-image: url(yourimage);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    font-family: Arial;
    padding: 11% 19%;
    position: relative;
    object-fit: cover;
}

tw-passage {
    color: black;
    max-width: 50%;
    font-size: 1.8vw;
    position: absolute;
    top: 50%; //change as desired
}