如何使背景图像跨越每个表格行并使用 HTML 和/或 CSS 动态调整大小？

Posted 2023-03-06

【中文标题】如何使背景图像跨越每个表格行并使用 HTML 和/或 CSS 动态调整大小？

【英文标题】：How do I make a background image span across each table row and be dynamically resizable with HTML and/or CSS?

【发布时间】：2021-03-19 06:26:38

【问题描述】：

我有以下代码，但它使表格在调整大小时看起来像这样。如何使 每一行 有一个背景图像，随着浏览器窗口大小的调整而正确调整大小？

<style type="text/css">
    .tg  border-collapse:collapse;border-spacing:0;
    .tg tdborder-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
      overflow:hidden;padding:10px 5px;word-break:normal;
    .tg thborder-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
      font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;
    .tg .tg-0laxtext-align:left;vertical-align:top
    
    table 
        width: 600px;
        background-image: url('bg.png');
        background-repeat: repeat-y;
        background-size: 100%;
        height: 100%;
    

</style>
    
    
<table class="tg">

      <tr>
        <td class="tg-0lax">Check</td>
        <td class="tg-0lax">MB Image</td>
        <td class="tg-0lax">LE 1000</td>
        <td class="tg-0lax">MB Name<p />Release</td>
      </tr>
      
      <tr>
        <td class="tg-0lax">Check</td>
        <td class="tg-0lax">MB Image</td>
        <td class="tg-0lax">LE 1000</td>
        <td class="tg-0lax">MB Name<p />Release</td>
      </tr>
      
      <tr>
        <td class="tg-0lax">Check</td>
        <td class="tg-0lax">MB Image</td>
        <td class="tg-0lax">LE 1000</td>
        <td class="tg-0lax">MB Name<p />Release</td>
      </tr>
      
      <tr>
        <td class="tg-0lax">Check</td>
        <td class="tg-0lax">MB Image</td>
        <td class="tg-0lax">LE 1000</td>
        <td class="tg-0lax">MB Name<p />Release</td>
      </tr>
    
</table>

我希望每一行都使用这张图片：

看起来像这样并且可以调整大小：

【参考方案1】：

背景大小？或者这不是你所期望的？如果没有明确预期的结果。

bodymargin:0;

table 
  height: 100vh;
  width: 100vw;
  border-collapse: collapse


td 
  border: solid 1px


tr 
  background: url(https://i.stack.imgur.com/1aeFs.png) -6vw 0;
  background-size: 106% 100%;

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>