嘿，这个问题我太熟了！用opacity确实会踩坑——它会把元素本身和所有子元素一起变透明，完全不是我们想要的效果。别慌，给你几个靠谱的解决方案，都能实现只让背景图片透明，不影响section里的文本和其他元素：

这是兼容性最好、最灵活的方案，原理是用::before或::after伪元素创建一个独立的层来放背景图，然后只给这个伪元素加透明度，section里的内容放在上层就不会受影响。

修改后的代码如下：

section {
  position: relative; /* 让伪元素相对于section定位 */
  padding: 15px;
  width: 100%;
  height: 700px;
  z-index: 1; /* 确保内容在伪元素背景之上 */
}

section::before {
  content: ""; /* 伪元素必须有content属性 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../IMG/Photo_NR1.jpg);
  opacity: 0.5; /* 只给背景图设置透明度 */
  z-index: -1; /* 把伪元素背景放到内容下面 */
}

这样一来，背景图的透明度完全不会影响section里的任何内容，完美解决问题！

如果不想写伪元素，也可以用linear-gradient叠加一个半透明的颜色层在背景图上，实现类似的效果：

section {
  padding: 15px;
  width: 100%;
  height: 700px;
  /* 这里用半透明白色渐变叠加，你可以根据网站风格调整rgba的颜色和透明度 */
  background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url(../IMG/Photo_NR1.jpg);
}

这个方法代码更简洁，但缺点是需要匹配网站的背景色——如果你的section背景不是白色，就把rgba(255,255,255,0.5)换成对应的颜色值（比如深色背景用rgba(0,0,0,0.5)）。

当然，你也可以用PS等工具直接给Photo_NR1.jpg添加50%的透明度，然后直接用原来的代码。但这种方法不够灵活，如果之后要调整透明度，就得重新修改图片，不如CSS方案方便。

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