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

Question

在中，我需要部分更改每个单元格的红色背景颜色，比如第一个单元格 100%，第二个单元格 100%，第三个单元格 50%。

更新：我进行了更改，将单元格的背景属性从红色更改为

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

但是有一个问题就是右边的边缘不锐利，淡出慢慢融入白色背景，如何避免这种现象？

Answer 1

Note: There are already few questions regarding hard-stop gradient creation which is why I didn't post my earlier comment as an answer but while searching for a duplicate I figured out there might be a better way to tackle your problem and hence posting the alternate approach as an answer.

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

让我在解释替代方法之前解决这个问题（只是为了完整起见）。您定义的渐变将由 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 属性控制它的 size/width。正如您在下面的演示中看到的，这与更改颜色停止点一样有效。

当你想 animate/transition 背景时，这种方法更有优势，因为 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>

看这个

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

Partial background color change of table-cell - gradient issue

html

css

linear-gradients

background-color