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％的空间是黑色的。

希望这有帮助。

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

2 个答案: