html - 将带渐变的元素背景色更改为不带渐变的背景色

Question

I have a table有两列和多行。当您单击除标题单元格之外的任何单元格(并保持单击)时，背景颜色会从非常浅的灰色变为浅蓝色，并且当您释放单击时，它会恢复为原始颜色。 (现在请检查代码并单击一个单元格)。到目前为止它是完美的。

table {
  margin-right: 1px;
  font-family: Arial, sans-serif;
}
table td {
  width: 100px;
  padding: 11px 16px;
  text-align: center;
  background: gray;
  /* Old browsers */
  background: linear-gradient(to left, #EEE 50%, #1F7DE2 50%);
  background-size: 200% 100%;
  background-position: right bottom;
  margin-left: 10px;
  transition: all 0.3s ease-in;
}
table td:active {
  background-position: left bottom;
  color: white;
}

<table>
  <tr class="title">
    <th>Column 1</th>
    <th>Column 2</th>
  </tr>
  <tr>
    <td>Content 1</td>
    <td>Content 2</td>
  </tr>
  <tr>
    <td>Content 1</td>
    <td>Content 2</td>
  </tr>
  <tr>
    <td>Content 1</td>
    <td>Content 2</td>
  </tr>
  <tr class="title">
    <th>Column 1</th>
    <th>Column 2</th>
  </tr>
  <tr>
    <td>Content 1</td>
    <td>Content 2</td>
  </tr>
  <tr>
    <td>Content 1</td>
    <td>Content 2</td>
  </tr>
  <tr>
    <td>Content 1</td>
    <td>Content 2</td>
  </tr>
</table>

<p style="background-color: #EEE;
	background-image: linear-gradient(#F7F7F7, #EEE); padding: 2em; display: block; border: 1px solid #C3C3C3; font-family: Arial, sans-serif;">
  The background should actually be like this
</p>

但是，如果您看一下我用来更改背景颜色的方法，实际上是使用 linear-gradient。因此，单元格已经具有蓝色背景，只是它不可见，直到您单击它们，这会更改 background-position，插入灰色背景(并给出它正在改变的想法).

如果您查看代码的末尾，您会发现有一个额外的 p 元素，其中包含我希望单元格具有的背景衬里渐变颜色(两种颜色，从下到下)。

问题是，我猜你不能用我的方法将 background: linear-gradient 更改为 background-color(纯色，没有渐变)。

Answer 1

像这样一个下一个地使用两个渐变:

table td {
    width:100px;
    padding: 11px 16px;
    text-align:center;
    background: grey;
    /* Old browsers */
    background-image: 
      linear-gradient(to left,transparent 50%, #1F7DE2 50%), 
      linear-gradient(#F7f7f7, #EEE);
    background-size: 200% 100%;
    background-position:right bottom;
    margin-left:10px;
    transition:all 0.3s ease-in;
}

table {
    margin-right: 1px;
    font-family: Arial, sans-serif;
}
table td {
    width:100px;
    padding: 11px 16px;
    text-align:center;
    background: grey;
    /* Old browsers */
    background-image: 
      linear-gradient(to left,transparent 50%, #1F7DE2 50%), 
      linear-gradient(#F7f7f7, #EEE);
    background-size: 200% 100%;
    background-position:right bottom;
    margin-left:10px;
    transition:all 0.3s ease-in;
}
table td:active {
    background-position:left bottom;
    color: white;
}

<table>
    <tr class="title">
        <th>Column 1</th>
        <th>Column 2</th>
    </tr>
    <tr>
      <td>Content 1</td>
      <td>Content 2</td>
    </tr>
    <tr>
      <td>Content 1</td>
      <td>Content 2</td>
    </tr>
    <tr>
      <td>Content 1</td>
      <td>Content 2</td>
    </tr>
    <tr class="title">
        <th>Column 1</th>
        <th>Column 2</th>
    </tr>
    <tr>
      <td>Content 1</td>
      <td>Content 2</td>
    </tr>
    <tr>
      <td>Content 1</td>
      <td>Content 2</td>
    </tr>
    <tr>
      <td>Content 1</td>
      <td>Content 2</td>
    </tr>
</table>