Question

我有以下 HTML 代码，我想要一个渐变块。但是渐变不会在浏览器上呈现。

div {
  height: 10px;
  background-color: linear-gradient(to right, #cc0099, #ff9933, #ff3399);
}

<div>hi</div>

你能告诉我这是什么问题吗。

提前致谢，尼基拉

Answer 1

对于渐变，它必须是 background-image，而不是 background-color。

div {
  background-image: linear-gradient(to right, #cc0099, #ff9933, #ff3399);
}

<div>hi</div>

Answer 2

linear-gradient 应该用在 background-image

div {
  height: 10px;
  background-image: linear-gradient(to right, #cc0099, #ff9933, #ff3399);
}

Answer 3

请将 background-color 更改为 background 以使代码受到影响。

    div {
      height: 100px;
      width: 100px;
      display: block;      
      background: linear-gradient(to right, #cc0099, #ff9933, #ff3399);
    }

背景颜色：线性渐变不起作用

3 个答案: