1. ホーム
  2. html

[解決済み] テーブルセルの背景を透明にする方法

2022-01-28 03:02:27

質問

all users"のページで、テーブルの中にテーブルを作成しています。最初のテーブルは、広告とユーザーの2つの部分に分かれています。最初のテーブルは、広告とユーザーの2つの部分に分かれています。 <tr><td>...</td></tr> そして、各ユーザーのデータがphpで表示されるように、別のテーブルを作成しました。

画像はこちらです。 http://postimg.org/image/3mbeyb411/

画像にあるように、親テーブルの右側(左側より大きい)には、"users"テーブルがあり、プロフィール写真が表示され、これは良いことです。
さて、この素敵なぼかしの背景をページに貼り付けましたが 親テーブルの白いセルの背景 がブロックしています。

その白い背景を透明にするにはどうしたらいいのでしょうか?試しに 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;"> が、やはりウェブ上では見つかりませんでした。あるいは、テーブルとセルの背景を透明にすることは可能なのでしょうか?

解決方法は?

透明な背景は、要素の背後にあるもの、この場合は、あなたの td は、実際には親テーブルです。ですから、純粋なCSSを使ってあなたが望むことを実現する方法はありません。スクリプトを使っても、直接的な解決にはならない。スクリプトで回避できるのは、ボディと td . ただし background-position ウィンドウのサイズが変更されるたびに、それに応じて変更されます。以下は、デフォルトの背景位置である body (これは left top を更新するようにコードを変更する必要があります。 background-positiontd を正しく表示)。

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 は透明です をボディに .