Question

我正在尝试使用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;
}

Answer 1

如果你想真正获得你指定的颜色，你应该用相同的颜色设置 2 颜色停止，相隔至少1 px。

否则，您只设置渐变变化点，但它已经变为透明，即使在同一像素中也是如此

而且，即使它不直观，透明如果黑色透明（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中（相同的颜色会在你的问题中停止），你可以看到在过渡过程中，颜色比开始时的颜色更暗。作为比较，在第二个中你可以看到你可能想要的东西，转换为白色透明。

CSS3 -webkit-linear-gradient创建比预期更深的垂直线

1 个答案: