我正在处理一个带有长可滚动背景图像的页面。该页面主要用于移动设备。我需要根据背景对齐几个项目(带有文本和图像的容器),以便这些项目位于道路上的某些点附近。
问题是我的背景图像宽度和高度根据移动设备屏幕而变化,而物品保留其位置,因此不再与道路对齐。
如何使用SASS / CSS解决此问题?
您可以使用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;
}
结帐这个codepen - > https://codepen.io/moorthy-g/pen/bZYyza