將線性漸變應用於背景

我一直在嘗試將線性漸變應用於背景，但出現在中間的條紋我沒有獲得平滑漸變，如何從上到下獲得平滑漸變將線性漸變應用於背景

我的CSS

-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
background: #DADADA; 
background-repeat: no-repeat; 
background: -webkit-linear-gradient(white, #DADADA); 
background: -moz-linear-gradient(white, #DADADA); 
background: -ms-linear-gradient(white, #DADADA); 
background: -o-linear-gradient(white, #DADADA);

我的小提琴：https://jsfiddle.net/3njyc0xm/

來源

2016-12-27 Sibi Raj

是的，我認爲這是一個問題，「你」的色彩。我用其他顏色嘗試了你的代碼，並沒有問題。 https://jsfiddle.net/3njyc0xm/2/ 所以，也許這是一種錯覺。 –

它的效果很好，只是你的顏色差異不是很重要......但它的工作原理。你可以檢查一個小容器：https：//jsfiddle.net/3njyc0xm/3/ – Alexis

實際上，有條紋它太小了@al –

是的，我認爲這是一個問題，「你」的色彩。我用其他顏色嘗試了你的代碼，並沒有問題。

我已經嘗試過在Firefox和Edge中使用jsfiddle漸變，並且它看起來沒有顏色問題，所以也許會出現Chrome bug或其他問題。

來源

2016-12-27 07:12:44

好吧，我會檢查.. –

好吧，我非常好奇，因爲這是一個有趣的問題。 –

其實Gehnet是正確的，他在下面回答，它在Firefox中工作，但在Chrome中它會導致問題 –

在Firefox中，您的示例工作正常，但我認爲某些瀏覽器需要「正常」CSS屬性。只是

background: linear-gradient(white, #DADADA);

添加它，我編輯了自己的小提琴here

來源

2016-12-27 07:37:18 Gehtnet

我試過你的jsfiddle，問題仍然存在於我的Chrome中。 –

是的，瀏覽器bug。@KicsiViziló –

將線性漸變應用於背景

回答

相關問題