CSS3 -webkit-linear-gradient 创建比预期更暗的垂直线答案

【问题标题】：CSS3 -webkit-linear-gradient creating darker vertical lines than expectedCSS3 -webkit-linear-gradient 创建比预期更暗的垂直线
【发布时间】：2013-07-01 18:42:45
【问题描述】：

我正在尝试使用 background-image 和 -webkit-linear-gradient 在纯 CSS 中创建一个网格。我的间距和平铺工作正常，但由于我无法弄清楚的原因，垂直线以#B8B8B9 而不是我指定的#E3E4E5 出现。有什么想法吗？

JSFiddle：http://jsfiddle.net/2faSt/

CSS：

.grid {
    position: absolute;
    width: 100%;
    height: 500px;
    background-image: -webkit-linear-gradient(0deg, #e3e4e5 0px, transparent 1px, transparent 15px, #e3e4e5 16px, transparent 16px, transparent 99px, #e3e4e5 100px, #ffffff 100px), -webkit-linear-gradient(90deg, transparent 20px, #e3e4e5 20px);
    background-size: 111px 21px;
}

【问题讨论】：

标签： html css linear-gradients

【解决方案1】：

如果你想真正得到你指定的颜色，你应该设置 2 个相同颜色的色标，间隔至少 1 px。

否则，你只设置渐变点，但它已经变成透明了，即使在同一个像素中

而且，即使它是不直观的，如果 black 透明 (rgba (0,0,0,1))

看到这个fiddle

那里，你有这个 CSS：

#one {
    background: linear-gradient(90deg, #e3e4e5, transparent);
}

#two {
    background: linear-gradient(90deg, #e3e4e5, rgba(255, 255, 255, 1));
}

在第一个 div 中（相同的颜色在您的问题中停止），您可以看到在过渡的中间颜色比开始时更暗。作为比较，在第二个中您可以看到您可能想要的，将过渡到白色透明。

【讨论】：

感谢您提供关于 2 站的提示。我可以使用它：background-image: -webkit-linear-gradient(0deg, #e3e4e5 0px, #e3e4e5 1px, transparent 1px, transparent 15px, #e3e4e5 15px, #e3e4e5 16px, transparent 16px, transparent 99px, #e3e4e5 99px, #e3e4e5 100px, #ffffff 100px), -webkit-linear-gradient(90deg, #ffffff 0px, #ffffff 20px, #e3e4e5 20px);

Updated Fiddle