线性渐变背景图像 - 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的样子：

- Baahubali

---

我更新了我的答案，加入了一个新的要点，请查看。 - Arman Ebrahimi

下面两个答案都是正确的。我怎么知道谁先回答的？对我来说时间显示是一样的。 - Baahubali

Rafael的回答比其他人早几秒钟。因此接受他的答案。 - Arman Ebrahimi

@Baahubali -- 以后参考，如果你将光标悬停在回答时间上（其中显示“昨天回答”或“一小时前回答”），最终你会得到一个工具提示，显示他们回答的确切时间戳。祝你好运，编码愉快！ - Alexander Nied

Answer 1

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>

- ℛɑƒæĿᴿᴹᴿ

---

这很有趣:) - Arman Ebrahimi

我不知道空格很重要 :(. - Baahubali

Answer 2

对我来说它很好用。只是在第一个背景图像中，我删除了rgb和(之间的空格：

.ui.inverted.top.fixed.menu {
  width: 100%;
  height: 100vh;
  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%);
}

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

编辑:

我也发现其他行中有这个空格。但是当我删除空格时，线性渐变的末端会变成深蓝色。看起来是因为在其他背景图像的情况下使用了 repeating 前缀：

你想要这样吗？我认为不需要。所以我删除了那些(-repeating)。现在怎么样了？

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

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

但是改变了线性渐变的方向。如果删除其他背景图像，它会被修复：

.ui.inverted.top.fixed.menu {
  width: 100%;
  height: 100vh;
  background-image: linear-gradient(135deg, rgb(24, 42, 115) 0%, rgb(33, 138, 174) 69%, rgb(32, 167, 172) 89%);
}

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

- Arman Ebrahimi

---

我不知道这个空格很重要 :(。 - Baahubali