要解决背景图像及其子元素的不透明度问题，可以使用CSS属性来控制元素的透明度。以下是一个示例代码，演示如何设置背景图像和子元素的不透明度：

HTML代码：

  

  

    
背景图像及其子元素的不透明度问题
    
这是一段示例文本。
  

CSS代码：

.container {
  position: relative;
  width: 400px;
  height: 300px;
}

.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('background.jpg');
  background-size: cover;
  opacity: 0.5; /* 设置背景图像的不透明度 */
  z-index: -1; /* 将背景图像置于底层 */
}

.content {
  position: relative;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.8); /* 设置子元素的不透明度 */
}

在上面的代码中，我们使用了.container作为一个容器来包裹所有的元素。.background-image类设置了背景图像的样式，并使用opacity属性将其不透明度设置为0.5。这样，背景图像就会半透明显示。同时，我们使用了z-index属性将背景图像置于底层，以确保其他元素可以覆盖在其上面。

.content类设置了子元素的样式，并使用background-color属性将其背景颜色设置为半透明的白色。这样，子元素也会半透明显示。

通过使用透明度相关的CSS属性，我们可以实现背景图像及其子元素的不透明度控制。