CSS3 漸變不適用於任何瀏覽器
[英]CSS3 gradients not working in any browser
問題描述
我已經在互聯網上搜索了 2 天，但一直無法找到我的問題的答案：CSS linear-gradient 在我的代碼中不起作用，在任何瀏覽器中。 我在有效的小提琴和其他有效的網站上看到了漸變。 我什至嘗試將他們的代碼復制並粘貼到我的代碼中，但它不起作用。 我只得到用於我的后備的純背景顏色。 我什至對我的拼寫進行了三重檢查，以確保某些東西不是 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，僅命名顏色作為來自另一個頁面的復制粘貼，以查看它是否有效。
是的，我知道它不向后兼容，我會在讓它為自己正常工作后到達那里。 我在 Windows 10 上運行 Chrome 版本 50.0.2661.75 m。還在 IE (Edge) 和 Firefox 中對其進行了測試......甚至沒有看到漸變的跡象。 我什至嘗試了 Chrome 的 -webkit- 前綴，只是為了看看它是否有效......沒有骰子。
這是任何人都可以玩的上述代碼的小提琴： https : //jsfiddle.net/e0p48ubf/2/
2 個解決方案
解決方案1
0 已采納 2016-04-21 14:55:05
我現在是所有 PEBCAK 用戶中的女王……謝謝 Harry 指出我的問題：
正確的語法是 linear-gradient(...) <-- 注意，gradient 和 (
我羞愧地低下了頭……再次感謝，哈利！
解決方案2
0 2016-04-21 14:55:29
您需要刪除漸變聲明之后的空格和括號的開頭。
背景：線性漸變（到底部，#64647f 0%，#b2b2c2 20%）；
背景：線性漸變（紅色，黃色）；
CSS3文字漸變不起作用？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.