Set 从右到左的线性渐变

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

u可以增加度数来设置旋转度

  background-image: linear-gradient(-90deg, red, blue);

Answer 2

您可以使用下面的代码

我添加了蓝色以查看结果。

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

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

.table-row {

    background-image: linear-gradient(to right, green , blue);
  background-size: 24%;
  background-repeat: no-repeat;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

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