如何让100vh背景图中的嵌套图片始终固定在指定位置？

解决思路：不用大量媒体查询也能固定元素位置 #

嘿，我太懂你这种“感觉需求快触碰到天花板，但又不甘心直接放弃”的心情了！咱们先拆解一下你当前的问题核心，再给你几个实际可行的方案，不用堆一堆媒体查询折腾自己。

首先，你现在的背景图设置height: 100vh; width: 100%本质是让背景图强制拉伸填充整个视口，这就导致背景图里的所有元素位置都会跟着视口尺寸变化而偏移——这才是你觉得需求难实现的根源。针对这个问题，分两种情况给你解决方案：

情况1：需要固定的图是独立元素（不是背景图的一部分） #

这是最省心的方案，直接把这张图做成单独的DOM元素，用position: fixed定位，完全脱离文档流，不管视口怎么缩放、滚动，它都会死死钉在你指定的位置：

.fixed-target-image {
  position: fixed;
  top: 200px; /* 替换成你需要的垂直位置 */
  left: 15%; /* 可以用像素也可以用百分比，灵活调整 */
  z-index: 10; /* 确保它在背景图上方，数值比背景容器的z-index大就行 */
}

这种方式零媒体查询，成本极低，效果还稳得一批。

情况2：需要固定的图是背景图的一部分（只能用一张大图当背景） #

这种情况稍微麻烦点，但也不用媒体查询：

1. 先改掉你当前的背景拉伸设置，别让背景图随视口缩放变形。比如把background-size从100% 100vh改成auto（保持原图尺寸），然后加上background-attachment: fixed——这个属性会让背景图相对于视口固定，而不是相对于容器滚动或缩放，这样背景图里的元素位置就不会变了。

.background-container {
  background-image: url('你的背景图地址');
  background-size: auto; /* 保持原图尺寸，不拉伸 */
  background-attachment: fixed;
  background-position: center top; /* 可以调整背景图在视口的初始位置 */
  height: 100vh;
  width: 100%;
}

当然，这个方案的代价是背景图可能无法完全覆盖视口（如果原图尺寸比视口小），或者会被裁剪（如果原图尺寸比视口大）。如果你想要背景图尽可能覆盖视口又不变形，可以试试background-size: cover配合background-attachment: fixed，这时候背景图的边缘会被裁剪，但里面的目标元素位置依然是固定的。

最后提醒 #

其实大多数时候，把需要固定的元素单独拆分出来用position: fixed是最优解——既不用折腾背景图的各种属性，也完全不用考虑媒体查询的适配问题，性价比超高。

内容的提问来源于stack exchange，提问作者user5582011