android - 无论屏幕大小如何，如何将元素与背景对齐？

Question

我正在处理一个页面，该页面有一个长长的可滚动的道路背景图片。该页面主要用于移动设备。我需要根据背景对齐多个元素(带有文本和图像的容器)，以便这些元素位于道路上某些点附近。

问题是我的背景图像宽度和高度根据移动设备屏幕而变化，而元素保持其位置，因此不再与道路对齐。

如何使用 SASS/CSS 解决这个问题？

Answer 1

您可以使用 vw css 单元根据屏幕宽度放置内容元素。

<div class="container">
    <div class="content">Content</div>
</div>

.container {
    background: url("//placehold.it/1500x1000") no-repeat;
    background-size: 100% auto;
    height: 1000px;
    position: relative;
}
.content {
    background: #f00;
    padding: 10px;
    position: absolute;
    left: 48vw;
    top: 35vw;
}

checkout 此代码笔 -> https://codepen.io/moorthy-g/pen/bZYyza