的 Demo

Question

我正在开发一个网站，其背景有两种略有不同的颜色，一种淡入另一种颜色。＃87a0b4到＃6a86a0

http://overactiverexburg.com/Sage/index.php

我有两个问题，

首先，它不适用于IE或Firefox

第二，我希望渐变或淡入淡出以后开始，更像是在页面下方的80％

#grad {
    background: -webkit-linear-gradient(#87a0b4, #6a86a0); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#87a0b4, #6a86a0)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#87a0b4, #6a86a0)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#87a0b4, #6a86a0)); /* Standard syntax */
}

Answer 1

您的第一个问题非常简单。除了webkit渐变之外，你有两个）在所有渐变的末尾。这就是它只适用于Chrome的原因。此外，似乎你的两种颜色都非常简单，很难分辨出是否有渐变。

的 Demo

CSS：

#grad { background: -webkit-linear-gradient(#87a0b4, #6a86a0); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(#87a0b4, #6a86a0); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(#87a0b4, #6a86a0); /* For Firefox 3.6 to 15 */ background: linear-gradient(#87a0b4, #6a86a0); /* Standard syntax */ }

可以通过使用色标来放置您想要渐变颜色的位置来修复第二个问题：

#grad { background: -webkit-linear-gradient(red 80%, yellow); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(red 80%, yellow); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(red 80%, yellow); /* For Firefox 3.6 to 15 */ background:linear-gradient(red 80%, yellow );/* Standard syntax */ }

的 Demo

以下是关于渐变的一些好文章：
http://css-tricks.com/css3-gradients/
http://code.tutsplus.com/tutorials/quick-tip-understanding-css3-gradients--net-10451
http://www.creativebloq.com/master-css-gradients-8114262

Answer 2

.box {
  position: relative;
  width: 100vw;
  height: 100vh;
  z-index: 1; 
  background: linear-gradient(to bottom,pink, grey);
  }

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
 
</head>
 
<body>
  <div1>
 
    <div class="box"></div>
 
  </div1>
 
 
</body>
 
</html>

CSS中的渐变背景色

2 个答案:

的 Demo

的 Demo