设置html table＆＃39; s tr的背景

Question

我想设置表格行的背景。 背景可以是图像或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

您需要使用：

MvxActivity

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;
}

要使背景透明化， 将背景应用于具有不透明度的伪元素 而不是实际的tr：

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

#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;
}