html - 缩放时将背景图像和文字放在一起

Question

这是我的导航栏，由背景图片上的一些链接组成。我使用以下方法定位图像:

background-position: x% y%;

当我调整页面大小时或缩放页面时，图像和链接的位置会发生变化。正因为如此，链接会转到照片中的植被上，对比度使它们难以辨认。那么，有没有一种方法可以将链接和图像分组或保持在一起，以便将它们保持在我声明的位置 background-position: x% y%; 当我在100% 缩放？

Answer 1

我会弄清楚植被从左侧开始的位置，看起来大约是 10%。然后有这样的事情:

.background {
  background-position: left center;
  background-size: 100% auto;
}
.text-wrapper { /*Some wrapper around the header and links, alternatively you could use something like h1, a:first-child */
  margin-left: 10%; /* the value of this being the % that the vegetation starts */
}