设置<tr>从右到左的线性渐变

Question

我想根据百分比设置 tr 背景色。所以我为我的 tr 使用了 background-image: linear-gradient(green, green) 样式。问题是 background-image 从左开始，我想从右到左填充颜色。这是我的风格：

.table-row {
  background-image: linear-gradient(green, green);
  background-size: 24%;
  background-repeat: no-repeat;
}

我该如何解决？工作 jsfiddle https://jsfiddle.net/h8vLd4sq/

Answer 1

你可以添加度数来设置旋转 https://jsfiddle.net/4mLdozyp/1/

   .table-row {
     background-image: linear-gradient(-90deg,green 33%, white 0%);
     background-repeat: no-repeat;
}

Answer 2

这是你需要的吗？

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

.table-row {
  background: linear-gradient(to right, white 60%, green 10%);
  background-repeat: no-repeat;
}

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr class="table-row">
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

设置<tr>从右到左的线性渐变

Set <tr> linear-gradient from right to left

html

css

background-image

linear-gradients