将线性渐变应用于背景

我一直在尝试将线性渐变应用于背景，但出现在中间的条纹我没有获得平滑渐变，如何从上到下获得平滑渐变将线性渐变应用于背景

我的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ó –

将线性渐变应用于背景

回答

相关问题