Question

鉴于页面主体有一个大胆着色的背景图像集，然后内部的画布<div>部分具有纯白色（#FFFFFF）的背景颜色和95％的不透明度，以便您可以看到像水印一样微弱的图像，是否可以用CSS在画布部分的表格中设置单元格的背景，使其具有白色背景但完全不透明，没有背景图像显示在单元格中的数据后面？

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

有没有人成功地成功实现了这一目标？

Answer 1

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

rgba（255,255,255，.3）

其中.3是背景颜色的不透明度值。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

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

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

如果你问的是什么。

Answer 3

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案: