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>

Answer 2

这个怎么样？它不完美，但可以工作......

https://jsfiddle.net/1uraqyqu/

.test{
  padding: 11px 16px;
    background-image: linear-gradient(#F7F7F7, #EEE);
}
.test:active{
    background-image: none;
}

和html

<td><div class="test">Content 1</div></td>

更改元素的背景颜色，渐变为背景颜色，不带渐变

2 个答案: