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

Question

在这个设计中，我需要部分改变每个单元格的红色背景色，比如第一个单元格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>

看这个