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

Question

我正在為我的“所有用戶”頁面在表中創建一個表。 第一個表分為兩部分——廣告和用戶——。 在<tr><td>...</td></tr>下的“用戶”表中，我為每個用戶的數據創建了另一個表，以通過 php 顯示。

這是圖片： http : //postimg.org/image/3mbeyb411/

正如您在圖像中看到的，父表的右側（比左側大）包含“用戶”表，其中顯示了他們的個人資料圖片，這很好。
is blocking it.現在我把這個漂亮的模糊背景放在我的頁面上，但擋住了它。

如何使白色背景變得透明？ 我試着做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

有可能的
您還只需要將顏色應用到“ tbody ”元素，因為這是通過偷看下方導致我們麻煩的表格主體。
table, tbody, tr, th, td{ background-color: rgba(0, 0, 0, 0.0) !important; }

Answer 3

這是什么？ :)

background-color: #D8F0DA;

嘗試

 background: none

並且覆蓋僅在屬性完全相同時才起作用。

背景不會覆蓋背景顏色。

如果你想要 alpha 透明度，那么使用這樣的東西

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

Answer 4

透明背景將幫助您查看元素后面的內容，在這種情況下，您的td后面實際上是父表。 所以我們沒有辦法用純 CSS 來實現你想要的。 即使使用腳本也無法直接解決。 基於對 body 和td使用相同背景的想法，我們可以使用腳本來解決。 但是，每當調整窗口大小時，我們都必須相應地更新background-position 。 這是您可以與body的默認背景位置一起使用的代碼（ left top ，否則您必須更改代碼以正確更新td的background-position ）：

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的背景對body透明。

Answer 5

我使用“透明”關鍵字，它完美無缺！

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

您正在為背景賦予顏色，然后期望它是透明的？ 刪除background-color: #D8F0DA ，

如果您希望 #D8F0DA 成為文本的顏色，請使用color: #D8F0DA

Answer 7

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

apha 是最后一個值。 它是一個十進制數，從 0（完全透明）到 1（完全可見）。

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;

    }
}