更新

Question

我正在为我的＆＃34;所有用户＆＃34;创建一个表格。页。第一个表格分为两部分 - 广告和用户 - 。在＆＃34;用户＆＃34;内在<tr><td>...</td></tr>下的表格中，我为每个用户的数据创建了另一个表格，以便通过php显示。

这是图片：http://postimg.org/image/3mbeyb411/

正如您在图像中看到的那样，父表的右侧（比左表大）包含＆＃34;用户＆＃34;他们的个人资料图片出现的表是好的。
现在我把这个漂亮的模糊背景放在我的页面上，但是父表格的白色单元格背景正在阻止它。

如何让白色背景变得透明？我尝试了background:transparent;，但无济于事。

<table id = "MainTable">
  <tr>
    <td width = "20%">

     </td>

    <td width = "80%">
        <table.......>***php users appear code here***</table>
    </td>
 </tr>
</table>

对于CSS

#MainTable {
    width: 100%;
    background-color: #D8F0DA;
    border: 1px;
    min-width: 100%;
    position: relative;
    opacity: 0.97;
    background: transparent;
}

请真的需要你的帮助。我已经谷歌搜索了好几天，仍然没有找到一个答案

更新

我正在寻找的是<td style="background:transparent;">这样的东西，但我仍然没有在网上找到它。或者甚至可以使表格和单元格的背景透明？

Answer 1

您可以在表格标签中通过样式设置透明度：

<table id="Main table" style="background-color:rgba(0, 0, 0, 0);">

rgba函数中的最后一位数字用于透明度。 1表示100％不透明，0表示100％透明。

Answer 2

这是什么？：）

background-color: #D8F0DA;

尝试

 background: none

只有当属性完全相同时，覆盖才有效。

背景不会覆盖背景颜色。

如果您想要Alpha透明度，请使用类似

的内容

background: rgba(100, 100, 100, 0.5);

Answer 3

透明背景将帮助您了解元素背后的内容，在这种情况下，td背后的内容实际上是父表。所以我们无法用纯CSS实现你想要的东西。即使使用脚本也无法直接解决它。我们可以根据为正文和td使用相同背景的想法，使用脚本来解决这个问题。但是，当窗口调整大小时，我们必须相应地更新background-position。以下是您可以使用body的默认背景位置（left top的代码，否则您必须更改代码才能正确更新background-position的{{1}} ）：

<强> HTML ：

td

<强> CSS ：

<table id = "MainTable">
 <tr> 
    <td width = "20%"></td>
    <td width = "80%" id='test'>
      <table>
        <tr><td>something interesting here</td></tr>
        <tr><td>another thing also interesting out there</td></tr>
      </table>
    </td>
 </tr>
</table>

JS （最好使用 jQuery ）：

/* use the same background for the td #test and the body */
#test {
  padding:40px;
  background:url('http://placekitten.com/800/500');    
}
body {
  background:url('http://placekitten.com/800/500');
}

Demo.

尝试调整视口大小，您会看到//code placed in onload event handler function updateBackgroundPos(){ var pos = $('#test').offset(); $('#test').css('background-position', -pos.left + 'px' + " " + (-pos.top + 'px')); }; updateBackgroundPos(); $(window).resize(updateBackgroundPos);正确更新，这会使效果看起来像background-position的背景透明到身体。

Answer 4

可能
您还需要将颜色应用于' tbody '元素，因为这是通过在下面偷看导致我们麻烦的表体点。
table, tbody, tr, th, td{ background-color: rgba(0, 0, 0, 0.0) !important; }

Answer 5

你给背景颜色，然后期望它是透明的？删除background-color: #D8F0DA，

如果您希望＃D8F0DA成为文字颜色，请使用color: #D8F0DA

Answer 6

您可以使用CSS属性＆＃34; background-color：transparent;＆＃34;，或在rgba颜色表示上使用apha。示例：＆＃34; background-color：rgba（216,240,218,0）;＆＃34;

apha是最后一个值。它是一个十进制数，从0（完全透明）到1（完全可见）。

Answer 7

我使用“透明”关键字，效果很好！

<style type="text/css">
#img table,tr, td {
    border: 1px solid transparent;
    align="center";
    border-spacing: 25px;
    border-collapse: collapse;
    border-width: 5px;
    padding: 5px;
    padding-left: 50px;
}

Answer 8

只需设置内部表的不透明度即可。如果只希望对特定表元素使用内联CSS，则可以使用内联CSS，因此它不适用于整个表。

style="opacity: 0%;"

Answer 9

您可以尝试：

  @media print {
    .table td,
    .table th {
        background-color: transparent !important;
        -webkit-print-color-adjust: exact !important;

    }
}

如何使表格单元格的背景透明

更新

9 个答案:

Demo.