如何使表格单元格的背景透明 [英] 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;
}

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

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 使用相同背景的想法的脚本解决方法.但是，每当窗口调整大小时，我们都必须相应地更新 background-position.这是您可以使用 body 的默认背景位置的代码(即 left top，否则您必须更改代码以更新 background-positiontd 的 正确):

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

演示.

尝试调整视口的大小，您会看到 background-position 正确更新，这将使效果看起来像 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屋！