CSS3 -webkit-linear-gradient創建比預期更深的垂直線條

我正嘗試在純CSS中使用background-image和-webkit-linear-gradient創建網格。我有間距和平鋪工作正常，但由於我無法弄清楚的原因，垂直線出現＃B8B8B9，而不是像我指定的＃E3E4E5。有任何想法嗎？CSS3 -webkit-linear-gradient創建比預期更深的垂直線條

的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; 
}

來源

2013-07-01 Mike R

如果你想獲得真正所指定的顏色，你應該設置顏色搭配同色系的，至少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（相同的顏色停止在你的問題），你可以看到，在轉換的中間顏色是較暗比在開始。作爲比較，在第二個你可以看到可能你想要的，使過渡到白色透明。

來源

2013-07-01 18:50:17 vals

感謝關於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）;'

[更新的小提琴]（http：// jsfiddle.net/2faSt/4/） –

CSS3 -webkit-linear-gradient創建比預期更深的垂直線條

回答

相關問題