1

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

1 回答 1

2

如果您想真正获得您指定的颜色，您应该设置2 个相同颜色的色标，至少相隔 1 像素。

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

而且，即使它是非直观的，如果黑色透明（rgba（0,0,0,1））也是透明的

看到这个小提琴

在那里，你有这个 CSS：

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

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

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

于 2013-07-01T18:50:17.117 回答