css - 线性渐变背景图像 - CSS 不工作

Question

这是我的 styles.css，其中包含:

.ui.inverted.top.fixed.menu {
    background-image:linear-gradient(135deg, rgb(24,42,115) 0%, rgb (33, 138, 174) 69%, rgb(32,167,172) 89%);
    background-image: -webkit-repeating-linear-gradient(135deg, rgb(24,42,115) 0%, rgb (33, 138, 174) 69%, rgb(32,167,172) 89%);
    background-image: -moz-repeating-linear-gradient(135deg, rgb(24,42,115) 0%, rgb (33, 138, 174) 69%, rgb(32,167,172) 89%) ;
    background-image: -ms-repeating-linear-gradient(135deg, rgb(24,42,115) 0%, rgb (33, 138, 174) 69%, rgb(32,167,172) 89%) ;
    background-image: -o-repeating-linear-gradient(135deg, rgb(24,42,115) 0%, rgb (33, 138, 174) 69%, rgb(32,167,172) 89%) ;
    background-image: repeating-linear-gradient(135deg, rgb(24,42,115) 0%, rgb (33, 138, 174) 69%, rgb(32,167,172) 89%) ; 
}

它有这么多版本的原因是因为我想表明我已经在所有浏览器中尝试了所有的可能性，但无法弄清楚为什么它不起作用。浏览器开发人员将其显示为无效的属性值。

这就是我尝试应用它的 HTML DOM 的样子:

Answer 1

rgb 和开始括号 之间有一个空格( 在每个 background-image 属性中。

您需要删除这些空格:

• 之前:rgb (
• 之后:rgb(

例子:

.ui.inverted.top.fixed.menu {
  height: 426px;
  background: linear-gradient(135deg, rgb(24, 42, 115) 0%, rgb(33, 138, 174) 69%, rgb(32, 167, 172) 89%);
  background: -webkit-repeating-linear-gradient(135deg, rgb(24, 42, 115) 0%, rgb (33, 138, 174) 69%, rgb(32, 167, 172) 89%);
  background: -moz-repeating-linear-gradient(135deg, rgb(24, 42, 115) 0%, rgb(33, 138, 174) 69%, rgb(32, 167, 172) 89%);
  background: -ms-repeating-linear-gradient(135deg, rgb(24, 42, 115) 0%, rgb(33, 138, 174) 69%, rgb(32, 167, 172) 89%);
  background: -o-repeating-linear-gradient(135deg, rgb(24, 42, 115) 0%, rgb(33, 138, 174) 69%, rgb(32, 167, 172) 89%);
  background: repeating-linear-gradient(135deg, rgb(24, 42, 115) 0%, rgb(33, 138, 174) 69%, rgb(32, 167, 172) 89%);
}

<div id="root">
  <div class="ui inverted top fixed menu">
    <div class="ui container"></div>
  </div>
</div>