如何创建一个HTML页面渐变背景(How to create a gradient backgrou

我在学习HTML的过程。

什么是创建一个HTML页面渐变背景的最佳方式？

到目前为止，这是我作为一个背景：

body style="background-color:Powderblue"

我知道这是不是一个梯度。

Answer 1:

这不能在HTML做，但它可以在CSS（特别是CSS3）。

你将不得不类添加到您的网页的身体或周围所有的内容在其中一个div。您可以使用CSS梯度发生器获得代码就摆在你的CSS类。

这里是一个div一个简单的例子： http://jsfiddle.net/8fDte/

你可以做以下的，以及如果你希望它在身上。请注意，您必须链接到将存储你的风格的CSS文件。

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
  <HEAD>
    <LINK href="PathToCss.css" rel="stylesheet" type="text/css">
  </HEAD>
  <BODY class="MyGradientClass">

  </BODY>
</HTML>

CSS

可以通过像一个上面链接的CSS梯度发生器产生该代码。

.MyGradientClass
{
    height:200px;
     background-image: linear-gradient(bottom, rgb(113,61,62) 25%, rgb(147,92,93) 63%, rgb(177,120,121) 82%);
    background-image: -o-linear-gradient(bottom, rgb(113,61,62) 25%, rgb(147,92,93) 63%, rgb(177,120,121) 82%);
    background-image: -moz-linear-gradient(bottom, rgb(113,61,62) 25%, rgb(147,92,93) 63%, rgb(177,120,121) 82%);
    background-image: -webkit-linear-gradient(bottom, rgb(113,61,62) 25%, rgb(147,92,93) 63%, rgb(177,120,121) 82%);
    background-image: -ms-linear-gradient(bottom, rgb(113,61,62) 25%, rgb(147,92,93) 63%, rgb(177,120,121) 82%);

    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.25, rgb(113,61,62)),
        color-stop(0.63, rgb(147,92,93)),
        color-stop(0.82, rgb(177,120,121))
    );   
}

编辑：

正如罗里提到，CSS3没有完全被所有的现代浏览器都支持。然而，也有一些工具，如PIE CSS帮助IE接受一些CSS3功能。

Answer 2:

它不可能使单独HTML的梯度。还有CSS3中的新功能，让你可以创建一个梯度，但这些并没有完全被所有浏览器支持。

如果你想阅读一些更多的CSS3渐变，请阅读这篇文章

还有一个方便的在线工具，它会创建CSS代码来创建规范的梯度，在这里。

Answer 3:

造型在外包装片的风格你的网页，特别是如果你有链接到你的样式表（S）几页一个更容易，更快捷，更有效的方式。这使您可以用一行代码更改所有页面的整个造型在同一时间。它是确定然而，如果你有，你有向上或如果你需要一个简单的页面本身看起来不同，内嵌样式是足够的，但不是常见的单页。请参阅下面的简单的例子。

（每个页面内嵌样式）

<!doctype html>
<html>
<head>
   <title>THIS WOULD GET AGGRAVATING IF DONE ON 10 PAGES!</title>
   <style="text/css">
      body {background: blue; font-family: Arial, Georgian, Sans-serif; font-size: 19px;}
      h1 {text-align: center, font-weight: bolder;}
      p {text-indent: 20px; line-height: 25px;}
   </style>
</head>
<body>
</body>
</html>

....否则将b这样

   <!doctype html>
      <!doctype html>
<html>
<head>
   <title>THIS CHANGES SAME PARAMETERS ON 100 PAGES WITH SAME LINK INSTANTLY!</title>
   <link rel="stylesheet" href="/cssfolder/yourcssheet.css" />

</head>
<body>
</body>

而你的“yourcssheet.css”样式表看起来像这样

/*BEGINNING OF STYLESHEET, NO OTHER CODING NECESSARY BUT SOME MIGHT PUT @meta charset utf-8 AT THE TOP BUT IS NOT NEEDED TO FUNCTION*/

    body {background: blue; font-family: Arial, Georgian, Sans-serif; font-size: 19px;}
      h1 {text-align: center, font-weight: bolder;}
      p {text-indent: 20px; line-height: 25px;}

/*END OF STYLESHEET*/

现在，而不是通过在每个单独的页头各种风格去，你可以简单地用一个简单的外部表中的所有通过以下链接在一起改变了这一切。

希望这可以帮助。 jhawk2k14@gmail.com

Answer 4:

使用此http://www.colorzilla.com/gradient-editor/

CSS应该在一个单独的样式表被应用了，从来没有申请造型直列。

Answer 5:

有迹象表明，创建渐变很多在线工具。要么你可以使用它们，或者你可以创建自己的

只需点击这里： http://www.cssmatic.com/gradient-generator

您也可以通过这种方式创建自己的

CSS

background-image: -webkit-linear-gradient(bottom, rgb(color_code) 25%, rgb(color_code) precent%, rgb(color_code) percent%);
background-image: -moz-linear-gradient(bottom, rgb(color_code) 25%, rgb(color_code) precent%, rgb(color_code) percent%);
background-image: -ms-linear-gradient(bottom, rgb(color_code) 25%, rgb(color_code) precent%, rgb(color_code) percent%);
background-image: -o-linear-gradient(bottom, rgb(color_code) 25%, rgb(color_code) precent%, rgb(color_code) percent%);
background-image: linear-gradient(bottom, rgb(color_code) 25%, rgb(color_code) precent%, rgb(color_code) percent%);

文章来源: How to create a gradient background for an HTML page