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 */
}