-1

我已经在互联网上搜索了 2 天，但我一直无法找到我的问题的答案：CSS 线性渐变在我的代码中不起作用，在任何浏览器中。我在小提琴和其他有效的网站上看到了渐变。我什至尝试将他们的代码复制并粘贴到我的代码中，但它不起作用。我只得到用于我的后备的纯背景颜色。我什至对我的拼写进行了三次检查，以确保某些内容不是 PEBCAK 错误……当我尝试将我的代码放入小提琴时，它仍然不起作用。我很难过......有人看到我做错了什么吗？

我的研究从这里的一个答案开始，它解释了渐变需要一个高度，所以我看到了一个让身体设置最小高度的技巧。然后我看到大多数人在div中都有渐变，所以我添加了一个测试div来尝试设置高度为100px。没有任何效果。这是我当前的测试代码：

我的 HTML：

<body>
<div>

    <div class="gradient">
        This is a test
    </div>

</div>
</body>

CSS：

*, html {
margin:0;
padding:0;
font-family:Calibri;
}

body {
min-height: 100vh;
background: #64647f;
background: linear-gradient (to bottom, #64647f 0%, #b2b2c2 20%);
}

.gradient {
border: 1px solid black;
height: 100px;
background: linear-gradient (red, yellow);
}

正文才是我真正关心的（设置页面的背景）。我尝试将带有渐变类的 div 添加为仅命名颜色的 div 作为来自另一个页面的复制粘贴，以查看它是否可以工作。

是的，我知道它不向后兼容，我会在我让它自己正常工作后到达那里。我在 Windows 10 上运行 Chrome 版本 50.0.2661.75 m。还在 IE (Edge) 和 Firefox 中对其进行了测试......甚至没有看到渐变的迹象。我什至尝试了 Chrome 的 -webkit- 前缀，只是为了看看这是否可行......没有骰子。

这是任何人都可以玩的上述代码的小提琴：https ://jsfiddle.net/e0p48ubf/2/

4

2 回答 2

0

您需要在渐变声明和括号开头之后删除空格。

背景：线性渐变（到底部，#64647f 0%，#b2b2c2 20%）；

背景：线性渐变（红色，黄色）；

于 2016-04-21T14:55:29.397 回答
0

我现在是所有 PEBCAK 用户的女王......感谢 Harry 指出我的问题：

正确的语法是 linear-gradient(...) <-- 注意，梯度和 (

我羞愧地低下了头……再次感谢，哈利！

于 2016-04-21T14:55:05.273 回答