表格单元的部分背景颜色变化 - 梯度问题

Question

在this design中，我需要部分更改每个细胞的红色背景颜色，说第一个细胞100％第二个细胞100％，第三个细胞50％。

更新：我更改了单元格的背景属性从红色变为

background: linear-gradient(to right, red 50%, white 51%)

但是它有一个问题，就是右边的边缘不锋利，渐渐淡出并融入白色背景，如何避免这种外观？

Answer 1

  

注意：关于硬停梯度创建的问题已经很少了，这就是为什么我没有发布我之前的评论作为答案但是在搜索重复时我发现可能存在更好的方法来解决您的问题，从而将替代方法作为答案发布。

为什么会淡出并混合成白色？

在解释替代方法之前，让我先解决这个问题（仅为了完整起见）。您定义的渐变将由UA解释如下：

• 由于第一个参数是to right，因此渐变从左侧开始（即0％在左侧）。
• 从0％到50％（即从左边到中间），渐变的颜色为纯红色。
• 根据渐变定义，红色以50％结束，白色仅以51％开始，因此在50-51％之间，颜色从红色缓慢变为白色（与另一侧的白色混合）。
• 从51％到100％（即从略微过去的一半到右边缘），颜色为纯白色。

这个50％到51％之间的间隙通常用于对角线（或角度）渐变，其中急剧停止导致锯齿状（不均匀）边缘，但 表示正常水平或垂直渐变，不需要

现在，我假设您正在尝试更改下面的颜色停止点以获得部分填充：

background: linear-gradient(to right, red 50%, white 50%); /* for a 50% fill */
background: linear-gradient(to right, red 75%, white 75%); /* for a 75% fill */

但有一种更好的方法是改变颜色停止点。

更好的方法是什么？为什么？

更好的选择是下面代码段中的颜色永远不会改变的选项。渐变只是一种纯红色，但我们使用background-size属性控制它的大小/宽度。正如您在下面的演示中所看到的，这与更改颜色停止点一样有效。

当您想要动画/转换背景时，此方法更有利，因为background-size是可转换属性，而渐变图像的颜色停止点更改则不是。您可以在下面的演示中看到我的意思。只需将鼠标悬停在每个单元格上，看看会发生什么。

.Row {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-spacing: 10px;
}

.Column {
  display: table-cell;
  background: linear-gradient(red,red); /* use the color you need */
  background-repeat: no-repeat; /* dont change */
  border: 1px solid; /* just to show cell width */
}

.Column:nth-child(1) {
  width:20%;
  background-size: 100% 100%; /* change first value for width change */ 
}
.Column:nth-child(2) {
  width:50%;
  background-size: 75% 100%; /* change first value for width change */
}
.Column:nth-child(3) {
  width:30%;
  background-size: 50% 100%; /* change first value for width change */
}

/* just for demo */

.Column { transition: all 1s; }
.Column:nth-child(1):hover { background-size: 50% 100%; }
.Column:nth-child(2):hover { background-size: 100% 100%; }
.Column:nth-child(3):hover { background-size: 75% 100%; }

<div class="Row">
  <div class="Column">C1</div>
  <div class="Column">C2</div>
  <div class="Column">C3</div>
</div>

如何更改填充方向？

我们可以通过将background-position设置为right到单元格，从单元格的右侧而不是左侧开始填充：如下面的代码段所示：

.Row {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-spacing: 10px;
}

.Column {
  display: table-cell;
  background: linear-gradient(red,red); /* use the color you need */
  background-repeat: no-repeat; /* dont change */
  background-position: right;
  border: 1px solid; /* just to show cell width */
}

.Column:nth-child(1) {
  width:20%;
  background-size: 100% 100%; /* change first value for width change */ 
}
.Column:nth-child(2) {
  width:50%;
  background-size: 75% 100%; /* change first value for width change */
}
.Column:nth-child(3) {
  width:30%;
  background-size: 50% 100%; /* change first value for width change */
}

/* just for demo */

.Column { transition: all 1s; }
.Column:nth-child(1):hover { background-size: 50% 100%; }
.Column:nth-child(2):hover { background-size: 100% 100%; }
.Column:nth-child(3):hover { background-size: 75% 100%; }

<div class="Row">
  <div class="Column">C1</div>
  <div class="Column">C2</div>
  <div class="Column">C3</div>
</div>

Answer 2

.Row {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-spacing: 10px;
}

.Column {
  display: table-cell;
  background-color: red;
  background: linear-gradient(to right, red, white);
  
}

.Column:nth-child(1) {
  width:20%;
}
.Column:nth-child(2) {
  width:50%;
}
.Column:nth-child(3) {
  width:30%;
}

<div class="Row">
  <div class="Column">C1</div>
  <div class="Column">C2</div>
  <div class="Column">C3</div>
</div>

看这个