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

How to make background of table cell transparent

提问by Emo-Punk

I am creating a table inside a table for my "all users" page. The first table was divided in to two parts--the ads and the users--. Inside the "users" table under <tr><td>...</td></tr>, I created another table for each of the user's data to appear via php.

我正在为我的“所有用户”页面在表中创建一个表。第一个表分为两部分——广告和用户——。在 下的“用户”表中<tr><td>...</td></tr>，我为要通过 php 显示的每个用户数据创建了另一个表。

Here's the image : http://postimg.org/image/3mbeyb411/

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

As you can see in the image, the right side of the parent table (which is larger than the left one) contained the "users" table where their profile pictures appeared which is good.
Now I put this nice blurry background on my page but the parent table's white cell backgroundis blocking it.

正如您在图像中看到的，父表的右侧（比左侧大）包含“用户”表，其中显示了他们的个人资料图片，这很好。
现在我把这个漂亮的模糊背景放在我的页面上，但父表的白色单元格背景挡住了它。

How can I make that white background become transparent? I tried doing the background:transparent;but to no avail.

如何使白色背景变得透明？我尝试这样做background:transparent;但无济于事。

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

     </td>

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

And for CSS

而对于 CSS

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

Please I really need your help. I've been Googling this for days and still didn't find a single answer

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

UPDATE

更新

What I was looking for is something like this <td style="background:transparent;">but still I didn't find it on the web. Or is it even possible to make the table and the cell's background transparent?

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

采纳答案by King King

Transparent background will help you see what behind the element, in this case what behind your tdis in fact the parent table. So we have no way to achieve what you want using pure CSS. Even using script can't solve it in a direct way. We can just have a workaround using script based on the idea of using the same background for both the body and the td. However we have to update the background-positionaccordingly whenver the window is resized. Here is the code you can use with the default background position of body(which is left top, otherwise you have to change the code to update the background-positionof the tdcorrectly):

透明背景将帮助您查看元素背后的内容，在这种情况下，您背后的td内容实际上是父表。所以我们没有办法用纯 CSS 来实现你想要的。即使使用脚本也无法直接解决。我们可以基于对 body 和td. 但是background-position，每当调整窗口大小时，我们都必须相应地更新。这里是你可以使用默认的后台位置使用的代码body（即left top，否则，您必须更改代码，以更新background-position的td正确）：

HTML:

HTML:

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

CSS:

CSS:

/* 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');
}    

JS(better use jQuery):

JS（最好使用jQuery）：

//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);

Demo.

演示。

Try resizing the viewport, you'll see the background-positionupdated correctly, which will make an effect looking like the background of the tdis transparent to the body.

尝试调整视口的大小，您将看到background-position正确更新，这将使效果看起来像 背景对bodytd是透明的。

回答by Catalin Marcu

You can do it setting the transparency via style right within the table tag:

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

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

The last digit in the rgba function is for transparency. 1 means 100% opaque, while 0 stands for 100% transparent.

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

回答by R_G

What is this? :)

这是什么？:)

background-color: #D8F0DA;

Try

尝试

 background: none

And override works only if property is exactly the same.

并且覆盖仅在属性完全相同时才起作用。

background doesn't override background-color.

背景不会覆盖背景颜色。

If you want alpha transparency, then use something like this

如果你想要 alpha 透明度，那么使用这样的东西

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

回答by MajklCan

It is possible
You just also need to apply the color to 'tbody' element as that's the table body that's been causing our trouble by peeking underneath.
table, tbody, tr, th, td{ background-color: rgba(0, 0, 0, 0.0) !important; }

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

回答by Reihan_amn

I use the "transparent"keyword and it works perfect!

我使用“透明”关键字，它完美无缺！

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

回答by Maxzeroedge

You are giving colour to the background and then expecting it to be transparent? Remove background-color: #D8F0DA,

您正在为背景赋予颜色，然后期望它是透明的？删除background-color: #D8F0DA,

If you want #D8F0DA to be the colour of text, use color: #D8F0DA

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

回答by Samuel Freitas

You can use the CSS property "background-color: transparent;", or use apha on rgba color representation. Example: "background-color: rgba(216,240,218,0);"

您可以使用 CSS 属性“background-color: transparent;”，或在 rgba 颜色表示上使用 apha。示例：“背景颜色：rgba(216,240,218,0);”

The apha is the last value. It is a decimal number that goes from 0 (totally transparent) to 1 (totally visible).

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