要解决背景图片透明度影响上方图标的问题，可以使用CSS中的伪元素来实现。下面是一个示例代码：

HTML:

  

  
图标

CSS:

.container {
  position: relative;
}

.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('背景图片的URL');
  opacity: 0.5; /* 背景图片的透明度设置为0.5 */
}

.icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1; /* 将图标的层级提高，使其位于背景图片上方 */
}

在这个例子中，我们将背景图片和图标都放在一个容器container内。通过设置容器的position为relative，我们可以将内部元素的定位相对于容器进行调整。

背景图片通过伪元素.background-image实现，使用position: absolute;将其定位于容器的左上角，并设置宽度和高度为100%以覆盖整个容器。通过background-image属性设置背景图片的URL，并使用opacity属性将透明度设置为0.5。

图标使用.icon类进行样式设置，同样使用position: absolute;将其定位于容器的中心，并使用transform: translate(-50%, -50%);进行居中调整。通过设置z-index: 1;将图标的层级提高，使其位于背景图片上方。

通过这种方式，背景图片的透明度不会影响上方的图标，图标将显示在背景图片上方。