设置 html table 的背景

Question

我想设置 table 行的背景。背景可以是图像或 CSS（最好）。我希望它看起来像这样，背景不透明：

我试过使用重复图像。这是我正在使用的图片。

但由于某些原因看起来像这样:

我的 HTML 看起来像这样：

<table id="chPurchaseTable">
    <thead>
        <tr>
            <th>Quantity</th>
            <th>Product</th>
            <th>u/m</th>
            <th>Price Each</th>
            <th>Line Total</th>
            <th></th>
        </tr>       
    </thead>
    <tbody>

和我的CSS

#chPurchaseTable thead tr{
    background:url('../images/rarrows.png') repeat; 
}

我怎样才能达到这种效果？

Answer 1

您需要利用：

background: url('https://i.stack.imgur.com/jT3CO.png') repeat;
  background-size: contain; /*To make sure the entire image fits the container */

#chPurchaseTable thead tr {
  background: url('https://i.stack.imgur.com/jT3CO.png') repeat;
  background-size: contain;
  color: white;
}

<table id="chPurchaseTable">
  <thead>
    <tr>
      <th>Quantity</th>
      <th>Product</th>
      <th>u/m</th>
      <th>Price Each</th>
      <th>Line Total</th>
      <th></th>
    </tr>
  </thead>
  <tbody>

要使背景像您所要求的那样透明，将背景应用到具有不透明度的伪元素上，而不是实际的 tr:

#chPurchaseTable thead tr {
  color: red;
  position: relative;
}

#chPurchaseTable thead tr::before {
  content: '';
  width: 100%;
  height: 100%;
  background: url('https://i.stack.imgur.com/jT3CO.png') repeat;
  background-size: contain;
  opacity: 0.5;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

<table id="chPurchaseTable">
  <thead>
    <tr>
      <th>Quantity</th>
      <th>Product</th>
      <th>u/m</th>
      <th>Price Each</th>
      <th>Line Total</th>
      <th></th>
    </tr>
  </thead>
  <tbody>

设置 html table 的背景

set background of html table's tr

html

css

background-image