background-image设置opacity异常、交互受阻及覆盖不全问题求助

问题需求 #

为页面背景图设置透明度，同时满足以下两个要求：

• 页面上层文字可正常展示
• 表单元素可正常输入交互

此前测试的方案均存在缺陷：要么文字可见但表单无法输入，要么文字与表单交互正常但背景图仅覆盖半屏，无法铺满整个视口。

相关代码 #

CSS 代码 #

* { margin: 0; padding: 0; }

/* 居中设置 */
body
{
    text-align: center;
}

/* 标题字号与字体 */
#title
{
    font-size: 40px;
    font-family: Mv Boli, sans-serif, arial;
}

/* 描述字号与字体 */
#description
{
    font-size: 20px;
    font-family: Mv Boli, sans-serif, arial;
}

/* 背景图设置 */
.background-image
{
      position: fixed;
      top: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      opacity: 0.5;
      z-index: -5000;
      background-image: url("https://material.angular.io/assets/img/examples/shiba2.jpg");
      background-repeat: no-repeat;
      background-size: cover;
}

/* 问卷表单样式 */
#survey-form
{
    background: hsl(204, 94%, 65%);
    max-width: 500px;
    margin: 50px auto;
    padding: 25px;
}

HTML 代码 #

<body>
  <h1 id="title">Survey Form for Tech</h1>
  <p id="description">Help us improve your experience!</p>

  <!-- 背景图 -->
  <div class="background-image"></div>

  <!-- 问卷表单 -->
  <form id="survey-form">
      <div class="form-flow">
          <label for="name" id="name-label">Name</label>
          <input id="name" type="text" required="" placeholder="Enter your name">
      </div>
  </form>
</body>

问题解决 #

该问题已完全修复，根因为代码中重复设置了两个背景图URL导致样式冲突，调整后所有效果均符合预期。

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