CSS - 100% 不透明 table 单元格超过 95% 不透明度背景图像

Question

给定一个页面正文有一个大胆的彩色背景图像集，然后 canvas <div> 部分里面有一个纯白色的背景颜色 (#FFFFFF) 和一个不透明度95% 这样你就可以看到像水印一样微弱的图像，是否可以使用 CSS 将 canvas 部分中的 table 中的单元格背景设置为白色背景但完全不透明，没有背景图像显示在单元格中的数据后面？

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

有没有人成功做到这一点？

Answer 1

<div id="opacity">
    <div id="no-opacity">content</div>
</div>

如果您将 opacity: .5 设置为 #opacity 元素，则无法在 #no-opacity 元素

上将此不透明度恢复为 opacity: 1

如果这就是你问的。

Answer 2

不要在 div 上使用 opacity 因为这会影响内部的所有内容并且对于子元素是不可逆的...而是使用 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>

Answer 3

您可以使用 RGBA (Red,Blue,Green,Alpha=opacity).

body{  background: blue url('//lorempixel.com/800/800/sports/'); }
#Wrap{ background: rgba(255,255,255, 0.95); padding: 25px; }

<div id="Wrap">
    <table>
        <tr><td> Example, I'm 100% visible! </td></tr>
    </table>
</div>