CSS - 在95%不透明背景图像上呈现100%不透明的表格单元格

Question

给定一个页面主体有一个醒目的背景图片，然后在其中有一个带有纯白色（#FFFFFF）背景颜色和95％不透明度的画布

部分，使您可以看到像水印一样淡淡地透过图片，那么使用CSS是否可以设置画布部分内表格单元格的背景为白色，但完全不透明，数据单元格后面没有背景图片显示？

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

有人成功实现过这个吗？

- richhallstoke

---

我不确定为什么 StackOverflow 比 Webmasters 更适合这个问题？ - richhallstoke

因为我们关注的是内容和脚本，所以网站管理员需要处理更多的技术细节。 - Martijn

Answer 1

不要在 div 上使用 opacity，因为它会影响所有内部内容，并且无法撤销子元素的效果... 相反，对于白色背景，请使用 rgba() 值：

rgba(255, 255, 255, .3)

其中 .3 是 background-color 的透明度值。

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>

- DaniP

---

这个解决方案非常出色，谢谢Danko。我已经忘记了rgba函数！ - richhallstoke

Answer 2

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

如果您将 opacity: .5 应用到 #opacity 元素，就不能将此不透明度恢复为 opacity: 1 在 #no-opacity 元素上。

如果这是您所询问的内容。

- Michał Kutra

---

嗨，Michal，是的，基本上是这样。我知道不可能从子节点覆盖opacity CSS属性，所以我正在寻找其他方法来实现这一点。 - richhallstoke

您的表格必须位于带有背景的主 div 内部吗？您不能以其他方式定位它吗？ - Michał Kutra

Answer 3

你可以使用RGBA（红，蓝，绿，Alpha=不透明度）。

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>

- Martijn

---

但是它是否适用于背景图像而不是背景颜色？ - Michał Kutra

@MichałKutra，请查看我的答案中的片段，您可以看到它有效...此代码仅使元素的背景透明，因此它将在任何元素上运行。 - DaniP

但是，当您向＃Wrap添加例如：background-image: url('//lorempixel.com/800/800/sports/');时，背景图像上将没有不透明度。 - Michał Kutra

图片位于主体中，包装是您的内容包装器。 - Martijn