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

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

但有比更改颜色停止点更好的方法。

---

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

更好的选择是下面的 sn-p 中颜色永远不会真正改变的选项。渐变始终只是纯红色，但我们使用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 到单元格的右侧而不是左侧开始填充，如下面的sn-p：

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

看看这个