HTML 表单背景叠加

Question

我有这个css代码：

#ticket {
        background:rgba(139,137,137,0.7);
    }

我的表单的 ID 为 ticket

这是在表单上显示背景，但是文本输入，文本区域和选择输入并显示背景的"顶部"

如何使背景显示在所有元素的顶部？

Answer 1

试试这个

    #ticket{
    display: block;
    width: 200px;
    height: 100px;
    background: green;  
    position: relative;
}
#ticket:before {
    position: absolute;
    display: block;
    background:rgba(139,137,137,0.7);
    content: "";
    top:0;
    left:0;
    right: 0;
    bottom: 0;
    z-index:9999;
 }

在这里演示

Answer 2

如果我

理解正确，您希望将输入元素放置在表单上，并且仍然能够看到表单的背景颜色？

#ticket input,
#ticket textarea,
#ticket select {
    background:transparent;
}

这将使元素的背景透明，以便您可以看到表单的背景。

#ticket {
  background: rgba(139, 137, 137, 0.7);
}
#ticket input,
#ticket textarea,
#ticket select {
  background: transparent;
}

<form id="ticket">
  <input>
  <textarea col="10" row="10"></textarea>
  <select>
    <option>Gender</option>
    <option>Male</option>
    <option>Female</option>
  </select>
</form>