CSS-100％不透明表格单元格超过95％不透明度背景图片

Question

给定一个页面主体，该页面主体设置有一个大胆的背景图像，然后在其中的画布<div>区域中使用纯白色（#FFFFFF）和95％的不透明度作为背景色，以便您可以看到像水印一样淡淡显示的图像是CSS是否可以将画布部分中的表格中的单元格背景设置为白色背景，但完全不透明，而没有背景图像通过单元格中的数据显示呢？

到目前为止，我已经尝试opacity: 1;在table，tr和td元素上进行设置，并且还尝试设置一个新的background-image: url('white.png');期望值，以在单元格背景上平铺1px x 1px的白色图像，但是这些方法似乎都不起作用。

以前有人成功地做到了吗？

Answer 1

不要opacity 在div上使用，因为这会影响内部的所有内容，并且对于子元素而言是不可逆的...而是将rgba()值用于白色背景：

rgba（255，255，255，.3）

哪里.3是背景色的不透明度值。

html,
body {
  height: 100%;
}
body {
  background: url('http://lorempixel.com/500/500/sports');
}
div {
  height:50%;
  width:70%;
  margin:auto;
  background:rgba(255,255,255,.5);
  padding:30px;
}
table {
  width:100%;
  background:white;
  line-height:90px;
}

<div>
  <table>
    <tr>
      <td>Item</td>
      <td>Item</td>
    </tr>
  </table>
</div>