CSS线性渐变看起来不像Photoshop的，可以修复吗？

Question

在使用 CSS 黑色到透明线性渐变时，我注意到它不会逐渐淡化为透明，而是使灰色区域停留的时间更长，并且仅在接近末尾时才变得透明并具有明显的限制。

在注意到这一点后，我决定使用具有确切属性的 Photoshop 渐变，它看起来更好，渐变从黑色平滑地线性变为透明。

以下示例显示左侧为 CSS 线性渐变，右侧为 Photoshop 生成的渐变 - 两者均使用完全相同的属性创建：

#css, #ps{
  height:100px;
  width:50%;
  }
#css{
  float:left;
  background:linear-gradient(black, transparent);
  }
#ps{
  float:right;
  background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABkCAMAAABw8qpSAAABLFBMVEUCAgIDAwMEBQUGBgYICAgJCQkLCwsNDQ0PDw8RERETExMVFRUXFxcZGRkbGxsdHh4gICAiIiIkJSUnJycpKiosLCwvLy8xMjI0NDQ3Nzc5Ojo8PDw/Pz9CQkJFRUVISEhLS0tOTk5RUVFUVFRXV1daWlpdXV1gYGBjY2NmZmZpamptbW1wcHBzc3N2dnZ5eXl8fX2AgICDg4OGhoaJiYmMjIyQkJCTk5OWlpaZmZmcnJyfn5+ioqKlpqaoqamrrKyvr6+ysrK0tbW3uLi6urq9vb3AwMDDw8PGxsbJycnLy8vOzs7R0dHT09PW1tbY2Njb29vd3d3g4ODi4uLk5OTm5ubp6enr6+vt7e3v7+/x8fHy8vL09PT29vb4+Pj5+fn7+/v8/Pz+/v4AAAE6GCMnAAAAY3RSTlP+/Pv5+Pb08vHv7evp5uTi4N3b2NbT0c7LyMbDwL26t7SxrquopaKfnJmWk4+MiYaDgHx5dnNwbGlmY2BdWldUUU5LSEVCPzw5NzQxLiwpJyQiHx0bGRYUEhAODQsJBwYEAwEIFXNRAAAAEElEQVQIHWNJZpnLwjj0IQCJ8QLzQI0QnQAAAABJRU5ErkJggg==");
}

<div id="css"></div>
<div id="ps"></div>

如您所见，差异清晰可见。是否可以将 Photoshop 的真正线性渐变复制到 CSS 中，或者我唯一的选择是使用 base64/png 技巧来实现实际的线性渐变？ 因为目前 css 的线性渐变不是线性的，实际上从我所见，它创建了一个 easeInOut-gradient 而不是线性的。

Answer 1

正如 GRC 所说，您可以设置多个中点值以使渐变适应您的确切需求

一个很好的起点是colorzilla，您可以在其中导入图像文件并获得自动结果。

对于你的图片，结果是：

.test {
    height: 100px;
    background: #020202; /* Old browsers */
    background: -moz-linear-gradient(top,  #020202 0%, #1f1f1f 9%, #434343 18%, #989898 38%, #b2b2b2 45%, #d1d1d1 56%, #e9e9e9 67%, #f2f2f2 73%, #f9f9f9 80%, #fdfdfd 87%, #fefefe 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#020202), color-stop(9%,#1f1f1f), color-stop(18%,#434343), color-stop(38%,#989898), color-stop(45%,#b2b2b2), color-stop(56%,#d1d1d1), color-stop(67%,#e9e9e9), color-stop(73%,#f2f2f2), color-stop(80%,#f9f9f9), color-stop(87%,#fdfdfd), color-stop(100%,#fefefe)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #020202 0%,#1f1f1f 9%,#434343 18%,#989898 38%,#b2b2b2 45%,#d1d1d1 56%,#e9e9e9 67%,#f2f2f2 73%,#f9f9f9 80%,#fdfdfd 87%,#fefefe 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #020202 0%,#1f1f1f 9%,#434343 18%,#989898 38%,#b2b2b2 45%,#d1d1d1 56%,#e9e9e9 67%,#f2f2f2 73%,#f9f9f9 80%,#fdfdfd 87%,#fefefe 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #020202 0%,#1f1f1f 9%,#434343 18%,#989898 38%,#b2b2b2 45%,#d1d1d1 56%,#e9e9e9 67%,#f2f2f2 73%,#f9f9f9 80%,#fdfdfd 87%,#fefefe 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #020202 0%,#1f1f1f 9%,#434343 18%,#989898 38%,#b2b2b2 45%,#d1d1d1 56%,#e9e9e9 67%,#f2f2f2 73%,#f9f9f9 80%,#fdfdfd 87%,#fefefe 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#020202', endColorstr='#fefefe',GradientType=0 ); /* IE6-9 */
}

<div class="test"></div>

问题是这个工具只提供 rgb 值，您需要手动将它们转换为 rgba，并使用 alpha 值。

Answer 2

您可以执行以下操作：

background:linear-gradient(black, transparent, transparent);

或

background:linear-gradient(black 10%, transparent);

10% 的空间被黑色占据。

希望这会有所帮助。