表细胞 - 梯度问题的部分背景颜色变化 [英] Partial background color change of table-cell - gradient issue

问题描述

在本设计中， a>我需要每个单元格的红色背景颜色部分改变，第一个单元格100％第二个单元格100％和第三个单元格50％。

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

的更改

 背景：线性渐变（右，红色50％，白色51 ％）
  

但它有一个问题，右边的边缘不尖锐，淡出淡出 强>已经很少有关于硬停止渐变创建的问题，这就是为什么我没有发布我的早期评论作为答案，但在搜索一个重复，我想出了可能是一个更好的方式来解决您的问题，因此发布

为什么会有淡出并融入白色？ >

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

• 由于第一个参数是 ，渐变开始于左侧（即0％在左侧）。


• 从0％到50％ ），渐变的颜色为纯红色。


• 红色以50％结束，白色开始只有在每个渐变定义的51％，因此50 - 51％之间的颜色缓慢变化从红色到白色（与另一边的白色混合）。


• 从51％到100％（即从稍微过去一半到右边缘），颜色是纯白色的。

50％到51％之间的间隙通常用于对角线

现在，您可以使用我假设你正试图改变颜色停止点，为了得到部分填充：

  background：linear-gradient （右，红50％，白50％）; / *为50％填充* / 
背景：线性渐变（右，红色75％，白色75％）; / *为75％填充* / 
  

但是有一个更好的方法做

---

更好的方法和原因是什么？ b
$ b

一个更好的选择是下面的代码片段，颜色永远不会改变。渐变只是一个坚实的红色总是，但我们控制它的大小/宽度使用 background-size 属性。

这种方法在你想要动画/转换背景时更有优势，因为 background-size 是一个可转换的属性，而渐变图像的颜色停止点更改不是。你可以看到我的意思在下面的演示。

  .Row {display：table; width：100％; table-layout：fixed; border-spacing：10px;}。column {display：table-cell;背景：线性梯度（红色，红色）; / *使用你需要的颜色* / background-repeat：no-repeat; / *不更改* / border：1px solid; / *只是为了显示单元格宽度* /}。column：nth-​​child（1）{width：20％; background-size：100％100％; / *改变宽度改变的第一个值* /} .Column：nth-​​child（2）{width：50％; background-size：75％100％; / *改变宽度改变的第一个值* /}。column：nth-​​child（3）{width：30％; background-size：50％100％; / *改变第一个值为宽度改变* /} / *只是为演示* /。列{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-repeat：no-repeat; / * dont change * / background-position：right; border：1px solid; / *只是为了显示单元格宽度* /}。column：nth-​​child（1）{width：20％; background-size：100％100％; / *改变宽度改变的第一个值* /} .Column：nth-​​child（2）{width：50％; background-size：75％100％; / *改变宽度改变的第一个值* /}。column：nth-​​child（3）{width：30％; background-size：50％100％; / *改变第一个值为宽度改变* /} / *只是为演示* /。列{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>  

In this design I need the red background color of each cell partially changed say the first cell 100% second cell 100% and the third cell 50%.

Update: I have made a change where cell's background property is changed from red to

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

but it has one problem that the edge on the right is not sharp and fades out gently blending into the white background, how to avoid that look?

解决方案

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.

Why is there a fade out and blend to white?

Let me get this out of the way before explaining the alternate approach (just for completeness sake). The gradient that you have defined would be interpreted by the UA as follows:

• Since the first param is to right, the gradient starts at left (that is 0% is at left).
• From 0% to 50% (that is, from left edge till half way), the color of the gradient is a solid red.
• Red ends at 50% and white starts only at 51% as per gradient definition and so between 50 - 51% the color slowly changes from red to white (and blends with the white on the other side).
• From 51% to 100% (that is, from slightly past half way till the right edge), the color is pure white.

This gap between 50% to 51% is generally used for diagonal (or angled) gradients where sharp stops result in jagged (uneven) edges but for normal horizontal or vertical gradients it won't be needed.

Now, I assume that you are trying to change the color stop points like below in order to get partial fill:

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

But there is a better way to do this than change the color stop points.

---

What is the better way and why?

A better option would be the one in the below snippet where the color never really changes. Gradient is just a solid red color always but we control it's size/width using background-size property. As you can see in the demo below, this is as effective as changing the color stop points.

This method is more advantageous when you want to animate/transition the background because the background-size is a transitionable property whereas the gradient image's color stop point change is not. You can see what I mean in the below demo. Just hover on each cell and see what happens.

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

How to change direction of the fill?

We can make the fill start from the right hand side of the cell instead of the left hand side by setting the background-position as right to the cells like in the below snippet:

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

这篇关于表细胞 - 梯度问题的部分背景颜色变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！