CSS - 100% 不透明的表格单元格超过 95% 不透明的背景图像答案

【问题标题】：CSS - 100% opaque table cells over 95% opacity background imageCSS - 100% 不透明的表格单元格超过 95% 不透明的背景图像
【发布时间】：2015-03-12 18:01:41
【问题描述】：

给定一个页面主体有一个颜色大胆的背景图像集，然后是一个内部的画布 <div> 部分，其背景颜色为纯白色 (#FFFFFF)，不透明度为 95%，这样您就可以看到像水印一样模糊显示的图像，是否可以使用 CSS 将画布部分中表格中的单元格背景设置为具有白色背景但完全不透明，并且在单元格中的数据后面没有显示背景图像？

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

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

【问题讨论】：

我不确定为什么 StackOverflow 比网站管理员更适合这个问题？
因为我们是关于内容和脚本的，所以网站管理员更多的是技术性的东西

标签： html css xhtml

【解决方案1】：

不要在 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>

【讨论】：

这个解决方案效果很好，谢谢 Danko。我已经忘记了 rgba 函数！

【解决方案2】：

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

如果您将opacity: .5 设置为#opacity 元素，则无法在#no-opacity 元素上将此不透明度恢复为opacity: 1

如果这就是你要问的。

【讨论】：

嗨，Michal，基本上是的。我知道不能从子节点覆盖 opacity CSS 属性，这就是为什么我正在寻找一种替代方法来实现这一点。
您的表格必须在主 div 内并带有背景？你不能用其他方式定位它吗？

【解决方案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>

【讨论】：

但它是否适用于背景图像而不是背景颜色？？
@MichałKutra 检查我的答案中的 sn-p 你可以看到它的工作原理......这段代码只是使元素的背景透明，所以它可以在任何元素上工作。
但是当你添加例如： background-image: url('//lorempixel.com/800/800/sports/');到#Wrap，背景中的图像将没有不透明度
图片在正文中，包装是你的内容包装