背景图片需要给innner div空间

时间：2019-05-30 06:11:46

标签： html css

我想给背景重复的空间。

尝试代码：

#bg_img {
  background-image: url("https://image.freepik.com/free-vector/diagonal-lines-vector-background-design_1017-12303.jpg");
  background-repeat: repeat;
  background-position: left center;
}
<div id="bg_img">
  <div id="tbles">
    <table width="100%" cellspacing="0" cellpadding="0" border="1">
      <tbody>
        <tr>
          <td width="4%" align="center"><strong>No</strong></td>
          <td style="min-width:25%" align="center"><strong>Name</strong></td>
          <td style="min-width:11%" align="center"><strong>Unit</strong></td>
          <td style="width:11%" align="center"><strong>Unit Price</strong></td>
        </tr>
        <tr>
          <td class="materialRow" align="center">1.</td>
          <td class="materialRow" align="left"><strong>Banana 1</strong><br>
            <font style="font-size:11px;">FIRE BARRIER CAULK</font>
          </td>
          <td class="materialRow" align="center">Test</td>
          <td class="materialRow" align="center">780.00</td>
        </tr>
        <tr>
          <td class="materialRow" align="center">2.</td>
          <td class="materialRow" align="left"><strong>Banana 2</strong><br>
            <font style="font-size:11px;">INTUMESCENT STRIP</font>
          </td>
          <td class="materialRow" align="center">Test</td>
          <td class="materialRow" align="center">73,600.00</td>
        </tr>
        <tr>
          <td class="materialRow" align="center">3.</td>
          <td class="materialRow" align="left"><strong>Banana 3</strong><br>
            <font style="font-size:11px;">STAINLESS STEEL HOOP</font>
          </td>
          <td class="materialRow" align="center">25.00</td>
          <td class="materialRow" align="center">Test</td>

        </tr>
        <tr>
          <td class="materialRow" align="center">4.</td>
          <td class="materialRow" align="left"><strong>Banana 4</strong><br>
            <font style="font-size:11px;">COATED FIRESTOP BOARD</font>
          </td>
          <td class="materialRow" align="center">Test</td>
          <td class="materialRow" align="center">125.00</td>
        </tr>
        <tr>
          <td class="materialRow" align="center">5.</td>
          <td class="materialRow" align="left"><strong>Banana 5</strong><br>
            <font style="font-size:11px;">MORTAR</font>
          </td>
          <td class="materialRow" align="center">Test</td>
          <td class="materialRow" align="center">185.00</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

是否可以仅使用背景空间，边距或填充来在特定区域上显示背景图像？

实际结果：

enter image description here

预期结果： enter image description here

2 个答案:

答案 0 :(得分：1)

您必须使用table更新thead结构，并将background-image应用于tbody。您还可以使用空白列来达到要求。在以下代码段中提到了所做的更改。试试这个，希望对您有所帮助。谢谢

#bg_img tbody {
    background-image: url("https://image.freepik.com/free-vector/diagonal-lines-vector-background-design_1017-12303.jpg");
            background-repeat: repeat;
    background-position: left center;
    }
    
.blank-row {
  padding: 1%;
}

tbody tr td:first-child,
tbody tr td:last-child{
  background-color: white;
}
<div id="bg_img">
  <div id="tbles">
       <table width="100%" cellspacing="0" cellpadding="0" border="1">
          <thead>
            <tr>
              <th width="2%"></th>
              <th width="4%" align="center"><strong>No</strong></th>
              <th style="min-width:25%" align="center"><strong>Name</strong></th>
              <th style="min-width:11%" align="center"><strong>Unit</strong></th>
              <th style="width:11%" align="center"><strong>Unit Price</strong></th>
              <th width="2%"></th>
            </tr>
            <tr>
              <th class="blank-row" colspan="6"></td>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td></td>
              <td class="materialRow" align="center">1.</td>
              <td class="materialRow" align="left"><strong>Banana 1</strong><br><font style="font-size:11px;">FIRE BARRIER CAULK</font></td>
              <td class="materialRow" align="center">Test</td>
              <td class="materialRow" align="center">780.00</td>
              <td></td>
              </tr><tr>
              <td></td>
              <td class="materialRow" align="center">2.</td>
              <td class="materialRow" align="left"><strong>Banana 2</strong><br><font style="font-size:11px;">INTUMESCENT STRIP</font></td>
              <td class="materialRow" align="center">Test</td>
              <td class="materialRow" align="center">73,600.00</td>
              <td></td>
              </tr><tr>
              <td></td>
              <td class="materialRow" align="center">3.</td>
              <td class="materialRow" align="left"><strong>Banana 3</strong><br><font style="font-size:11px;">STAINLESS STEEL HOOP</font></td>
              <td class="materialRow" align="center">25.00</td>
              <td class="materialRow" align="center">Test</td>
              <td></td>
              </tr><tr>
              <td></td>
              <td class="materialRow" align="center">4.</td>
              <td class="materialRow" align="left"><strong>Banana 4</strong><br><font style="font-size:11px;">COATED FIRESTOP BOARD</font></td>
              <td class="materialRow" align="center">Test</td>
              <td class="materialRow" align="center">125.00</td>
              <td></td>
              </tr><tr>
              <td></td>
              <td class="materialRow" align="center">5.</td>
              <td class="materialRow" align="left"><strong>Banana 5</strong><br><font style="font-size:11px;">MORTAR</font></td>
              <td class="materialRow" align="center">Test</td>
              <td class="materialRow" align="center">185.00</td>
              <td></td>
            </tr>
            <tr>
              <td class="blank-row" colspan="6"></td>
            </tr>
      </tbody>
    </table>
  </div>
</div>

答案 1 :(得分：1)

无需添加多余的空白元素，可以考虑多个背景，您可以在背景上方添加白色层以控制空间。只需调整每层的背景大小即可减少/增加空间：

#bg_img {
  background: 
    linear-gradient(#fff,#fff) left  /2% 100% no-repeat,
    linear-gradient(#fff,#fff) right /2% 100% no-repeat,
    linear-gradient(#fff,#fff) top   /100% 25px no-repeat,
    linear-gradient(#fff,#fff) bottom/100% 10px no-repeat,
    url("https://image.freepik.com/free-vector/diagonal-lines-vector-background-design_1017-12303.jpg");
}
<div id="bg_img">
  <div id="tbles">
    <table width="100%" cellspacing="0" cellpadding="0" border="1">
      <tbody>
        <tr>
          <td width="4%" align="center"><strong>No</strong></td>
          <td style="min-width:25%" align="center"><strong>Name</strong></td>
          <td style="min-width:11%" align="center"><strong>Unit</strong></td>
          <td style="width:11%" align="center"><strong>Unit Price</strong></td>
        </tr>
        <tr>
          <td class="materialRow" align="center">1.</td>
          <td class="materialRow" align="left"><strong>Banana 1</strong><br>
            <font style="font-size:11px;">FIRE BARRIER CAULK</font>
          </td>
          <td class="materialRow" align="center">Test</td>
          <td class="materialRow" align="center">780.00</td>
        </tr>
        <tr>
          <td class="materialRow" align="center">2.</td>
          <td class="materialRow" align="left"><strong>Banana 2</strong><br>
            <font style="font-size:11px;">INTUMESCENT STRIP</font>
          </td>
          <td class="materialRow" align="center">Test</td>
          <td class="materialRow" align="center">73,600.00</td>
        </tr>
        <tr>
          <td class="materialRow" align="center">3.</td>
          <td class="materialRow" align="left"><strong>Banana 3</strong><br>
            <font style="font-size:11px;">STAINLESS STEEL HOOP</font>
          </td>
          <td class="materialRow" align="center">25.00</td>
          <td class="materialRow" align="center">Test</td>

        </tr>
        <tr>
          <td class="materialRow" align="center">4.</td>
          <td class="materialRow" align="left"><strong>Banana 4</strong><br>
            <font style="font-size:11px;">COATED FIRESTOP BOARD</font>
          </td>
          <td class="materialRow" align="center">Test</td>
          <td class="materialRow" align="center">125.00</td>
        </tr>
        <tr>
          <td class="materialRow" align="center">5.</td>
          <td class="materialRow" align="left"><strong>Banana 5</strong><br>
            <font style="font-size:11px;">MORTAR</font>
          </td>
          <td class="materialRow" align="center">Test</td>
          <td class="materialRow" align="center">185.00</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

相关问题
最新问题