Question

我在mozilla firefox中遇到线性渐变的问题。遵循css代码：

background: linear-gradient(180deg, black 20%, darkorange);

html {
  height:100vh;/* demo purpose*/
  background: linear-gradient(180deg, black 20%, darkorange);
}

对于所有浏览器都能产生漂亮的背景，从黑色到橙色的平滑变换。但它在Firefox中不起作用。它一个接一个地产生很多细的橙色和黑色线条。但是，当我将第一个参数更改为90deg（水平渐变）时，它可以正常工作。我做错了什么？我已经从stackoverflow中读到了关于这个问题的类似问题，但没有解决方案对我有用。是的，我尝试更改为-moz-linear-gradient并且它也无法正常工作（我使用的是最新版本的FF浏览器，所以它不应该是一个因素。

提前感谢您的帮助。

JS-fiddle link (not much to fiddle there though):

嗯，我在这里用GCyrillus添加的代码剪辑进行了测试，并且它正常工作。但是，当我在浏览器或JS Fiddle中测试时，它仍会产生奇怪的结果，如下图所示： Imgur

Answer 1

您需要确保您设置背景的元素具有高度，无论是明确设置还是由于内容。

＆＃13;

.test {
  width: 100px;
  background: linear-gradient(180deg, black 20%, darkorange);
  float: left;
}
#test1 {
  height:200px;
}

＆＃13;

<div class="test" id="test1">Test</div>
<div class="test">Test</div>

＆＃13;

Css线性渐变在mozilla firefox中无法正常工作

1 个答案: