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渐变而不是线性渐变。

- Shadow

---

你在Photoshop中设置了哪种混合模式？ - steveax

@steveax，这不是混合模式，而是一个简单的渐变，从黑色开始到透明结束。 - Shadow

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并调整透明度。

- vals

Answer 2

您可以做以下操作：

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

或者

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

黑色占据了10%的空间。

希望这可以帮到你。

- user4580220

---

这并没有帮助，你真正观察了你的建议的结果吗？它们产生的结果与默认的CSS线性渐变有很大不同，并且远离预期目标。 - Shadow

是的，可以使用颜色和rgba值。您可以获得所需的精确组合，但必须进行调试。您使用哪些浏览器？在这里尝试： http://www.w3schools.com/css/tryit.asp?filename=trycss3_gradient-linear - user4580220

我已经在Chrome和Firefox上进行了测试。您的建议与Photoshop的渐变效果相差甚远。如果我要详细复制渐变效果，那么就失去了不使用渐变图像的目的，因为这将比使用渐变PNG文件更加繁琐和耗时。 - Shadow