Html CSS渐变不是'；行不通_Html_Background_Gradient_Css

Html CSS渐变不是'；行不通

html css

Html CSS渐变不是'；行不通,html,background,gradient,css,Html,Background,Gradient,Css,我正在为一个项目编写这个网页，但我无法显示渐变背景。我正在确保我的代码兼容多个浏览器，但我不知道我做错了什么这是我的代码： <!DOCTYPE html> <html> <head> <title>About Leo Alfred: 12/14/2013</title> <style type="text/css"> body { background: -webkit-linea

我正在为一个项目编写这个网页，但我无法显示渐变背景。我正在确保我的代码兼容多个浏览器，但我不知道我做错了什么

这是我的代码：

<!DOCTYPE html>

<html>
<head>

  <title>About Leo Alfred: 12/14/2013</title>

  <style type="text/css">
    body
    {
      background: -webkit-linear-gradient(#4B647A, #081C2E);
      background: -o-linear-gradient(#4B647A, #081C2E);
      background: -moz-linear-gradient(#4B647A, #081C2E);
      background: linear-gradient(#4B647A, #081C2E);
      color: #E9EEF2;
      min-height:100%;
      margin:0;
    }


    h1 {
      text-align: center;
    }

    #me {
      height: 600px;
      width: 500px;
      border-radius: 12px;
      margin-left: auto;
    margih3 {ght: text-align: center;diu}: 12px;
      }

    h2 {
      text-align: center;
    }

    h3 {
      text-align: center;
    }
  </style>
</head>
<body>
<h1>Leo Alfred<h1>
  <img id = "me" src="assets/Leo_Pic.jpeg" title = "A Picture of Leo Alfred" alt="Leo Alfred"</div>
  <h2>Leo Alfred</h2>
  <h3>School and BDPA</h3>
  <p></p>
</body>
</html>


关于利奥·阿尔弗雷德：12/14/2013
身体
{
背景：-webkit线性梯度（#4B647A，#081C2E）；
背景：-o-线性梯度（#4B647A，#081C2E）；
背景：-莫兹线性梯度（#4B647A，#081C2E）；
背景：线性梯度（#4B647A，#081C2E）；
颜色：#E9EEF2；
最小高度：100%；
保证金：0；
}
h1{
文本对齐：居中；
}
#我{
高度：600px；
宽度：500px；
边界半径：12px；
左边距：自动；
margih3{ght:text align:center；diu}:12px；
}
氢{
文本对齐：居中；
}
h3{
文本对齐：居中；
}
利奥·阿尔弗雷德
利奥·阿尔弗雷德
学校和BDPA

提前谢谢你帮助我

所有张贴的东西都有助于提高梯度，但只有三分之二的页面。之后，它只是一个蓝色的矩形

请看一下我说的蓝色矩形是什么意思。

线性渐变

是一种

背景图像

，而不是

背景色
这不是渐变的正确格式。此外，渐变是图像，而不是颜色
background-image:linear-gradient(direction, colour, colour, ...)

因此，在你的情况下：
background-image: linear-gradient(to bottom, #4B647A, #081C2E);

尝试从以下位置更改css：
background-color: -webkit-linear-gradient(#4B647A, #081C2E);
background-color: -o-linear-gradient(#4B647A, #081C2E);
background-color: -moz-linear-gradient(#4B647A, #081C2E);
background-color: linear-gradient(#4B647A, #081C2E);

致：
值得一提的是CSS上的MDN文档，您的属性不正确。它应该是背景：线性渐变（etc等）
而不是背景色

如果你把你的代码原封不动地删除单词color，它就可以正常工作了
编辑：如果您希望它是渐变块，那么很抱歉，我不知道如何帮助您。但是，如果您喜欢这样一种从上到下的渐变，那么您所要做的就是将css选择器从body更改为html
希望能成功
<!DOCTYPE html>

<html>
<head>

  <title>About Leo Alfred: 12/14/2013</title>

  <style type="text/css">
    html
    {
      background: -webkit-linear-gradient(#4B647A, #081C2E);
      background: -o-linear-gradient(#4B647A, #081C2E);
      background: -moz-linear-gradient(#4B647A, #081C2E);
      background: linear-gradient(#4B647A, #081C2E);
      color: #E9EEF2;
      min-height:100%;
      margin:0;
    }


    h1 {
      text-align: center;
    }

    #me {
      height: 600px;
      width: 500px;
      border-radius: 12px;
      margin-left: auto;
    margin {ght: text-align: center;diu}: 12px;
      }

    h2 {
      text-align: center;
    }

    h3 {
      text-align: center;
    }
  </style>
</head>
<body>
<h1>Leo Alfred<h1>
  <img id = "me" src="assets/Leo_Pic.jpeg" title = "A Picture of Leo Alfred" alt="Leo Alfred"</div>
  <h2></div>Leo Alfred</h2>
  <h3>School and BDPA</h3>
  <p></p>
</body>
</html>


关于利奥·阿尔弗雷德：12/14/2013
html
{
背景：-webkit线性梯度（#4B647A，#081C2E）；
背景：-o-线性梯度（#4B647A，#081C2E）；
背景：-莫兹线性梯度（#4B647A，#081C2E）；
背景：线性梯度（#4B647A，#081C2E）；
颜色：#E9EEF2；
最小高度：100%；
保证金：0；
}
h1{
文本对齐：居中；
}
#我{
高度：600px；
宽度：500px；
边界半径：12px；
左边距：自动；
边距{ght:text align:center；diu}:12px；
}
氢{
文本对齐：居中；
}
h3{
文本对齐：居中；
}
利奥·阿尔弗雷德
利奥·阿尔弗雷德
学校和BDPA

显示渐变色，但渐变色仅在页面下方的三分之二处显示，下方为蓝色。同样在上面的代码中，我有一个随机标记，我去掉了它。它得到了要显示的渐变，但是渐变只沿着页面的三分之二向下移动，下面是一个蓝色。这得到了要显示的渐变，但是渐变只占页面的三分之二，下面是蓝色，我去掉了-color。这样就可以显示渐变，但是渐变只会沿着页面向下延伸三分之二，下面是蓝色。是这样吗？你没看到屏幕底部的蓝色矩形吗？那是我唯一的问题。。。事实上，我根本没有注意到这一点。我不明白为什么一开始它是在这样的块中…它不应该是一个从上到下的整体梯度吗？这也是我不明白的。梯度不是真正的问题，而是底部的那个块。
<!DOCTYPE html>

<html>
<head>

  <title>About Leo Alfred: 12/14/2013</title>

  <style type="text/css">
    html
    {
      background: -webkit-linear-gradient(#4B647A, #081C2E);
      background: -o-linear-gradient(#4B647A, #081C2E);
      background: -moz-linear-gradient(#4B647A, #081C2E);
      background: linear-gradient(#4B647A, #081C2E);
      color: #E9EEF2;
      min-height:100%;
      margin:0;
    }


    h1 {
      text-align: center;
    }

    #me {
      height: 600px;
      width: 500px;
      border-radius: 12px;
      margin-left: auto;
    margin {ght: text-align: center;diu}: 12px;
      }

    h2 {
      text-align: center;
    }

    h3 {
      text-align: center;
    }
  </style>
</head>
<body>
<h1>Leo Alfred<h1>
  <img id = "me" src="assets/Leo_Pic.jpeg" title = "A Picture of Leo Alfred" alt="Leo Alfred"</div>
  <h2></div>Leo Alfred</h2>
  <h3>School and BDPA</h3>
  <p></p>
</body>
</html>