如何使表格单元格背景透明 [英] How to make background of table cell transparent

问题描述

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

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.

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

在图像中您可以看到，父表的右侧（大于左侧）包含 users。他们的个人资料图片出现的桌子，很好。

现在我在页面上放置了这个漂亮的模糊背景，但父表的白单元格背景阻止了它。

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 background is blocking it.

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

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

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

请我真的需要您的帮助。我已经使用Google搜索了好几天，但仍然找不到一个答案

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

我一直在寻找的东西是这样的< td style = background：transparent;> ，但我仍然没有在网上找到它。还是有可能使表格和单元格的背景透明？

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 后面实际上是父表。因此，我们无法使用纯CSS实现所需的功能。即使使用脚本也无法直接解决。我们可以使用脚本来解决问题，其思路是对正文和 td 使用相同的背景。但是，无论何时调整窗口大小，我们都必须相应地更新背景位置。这是您可以使用默认背景位置为 body （即 left top ）的代码，否则，您必须更改代码以正确更新 td 的背景位置）：

Transparent background will help you see what behind the element, in this case what behind your td is 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-position accordingly 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-position of the td correctly):

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 ：

/* 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 （最好使用 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);

演示。

尝试调整视口大小，您会看到背景位置已更新正确，这将使效果看起来像 td 的背景对身体透明。

Demo.

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

这篇关于如何使表格单元格背景透明的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！