我来帮你搞定这个问题！直接给包含文字的元素加opacity会连带所有子元素（比如你的导航文字）一起变透明，这肯定不是你想要的结果。最优解是用CSS伪元素单独给背景图添加透明度，这样文字完全不受影响。

具体实现步骤： #

1. 先把.header里的background-image、background-position、background-size这些属性删掉——我们要用伪元素来承载背景图。
2. 确保.header保留position: relative（你的代码里已经有这个属性了，刚好能用来定位伪元素）。
3. 创建.header::before伪元素，把背景图放在这个伪元素里，设置好透明度后，把它放到文字内容的下方。

修改后的完整CSS代码： #

* { margin: 0; padding: 0; font-family: 'Poppins', sans-serif; }
.header { 
  min-height: 100vh; 
  width: 100%; 
  position: relative; /* 保持相对定位，让伪元素以它为基准 */
}
/* 新增伪元素作为独立的背景层 */
.header::before {
  content: ''; /* 伪元素必须设置content属性才能生效 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(images/lake.jpg);
  background-position: center;
  background-size: cover;
  opacity: 0.7; /* 在这里调整透明度，0为完全透明，1为完全不透明 */
  z-index: -1; /* 将背景层置于文字内容下方，避免遮挡 */
}
nav { display: flex; padding: 2% 6%; justify-content: space-between; align-items: center; }
nav img { width: 300px; }
.logo { width: 0%; height: 0%; display: block; }
.navbar { flex: 1; text-align: right; }
.navbar ul li { list-style: none; display: inline-block; padding: 8px 12px; position: relative; }

这个方法的优势： #

• 伪元素.header::before相当于给背景图单独创建了一个独立的“图层”，完全不干扰真实的文字内容。
• z-index: -1确保背景层始终在导航栏等内容的下方，不会出现遮挡问题。
• 不需要额外添加HTML元素，代码更简洁易维护。

你之前考虑给背景图单独加类，其实这个伪元素就实现了类似的效果——相当于给背景图单独分配了一个样式容器，完美解决你的困惑。

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