Question

我正在学习HTML。

为HTML页面创建渐变背景的最佳方法是什么？

到目前为止，这是我的背景：

body style="background-color:Powderblue"

我知道这不是一个渐变。

Answer 1

这不能在html中完成，但它可以在css中（特别是css3）。

您必须在页面正文中添加一个类，或者在其中包含所有内容的div。您可以使用css gradient generator来获取要放入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))
    );   
}

修改：

正如Rory所说，所有现代浏览器都不完全支持CSS3。但是，有一些工具如PIE CSS可以帮助IE接受一些CSS3功能。

Answer 2

单靠HTML制作渐变是不可能的。 CSS3中有一些新功能允许您创建渐变，但并非所有浏览器都完全支持这些功能。

如果您想了解更多有关CSS3渐变的信息，请阅读this article

还有一个方便的在线工具，可以创建CSS代码来创建规范的渐变here。

Answer 3

外部工作表中的样式是一种更简单，更快速，更有效的网页样式设置方式，尤其是如果您有几个链接到样式表的页面。这允许您使用一行代码同时更改所有页面的整个样式。但是，如果你有一个单独的页面，或者如果你需要一个简单的页面看起来不同，那么内联样式就足够了但不常见。请参阅下面的快速示例。

（每页的内联样式）

<!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>

....或者它会像这样

   <!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

有很多在线工具可以创建Gradients。您可以使用它们，也可以创建自己的

只需点击此处：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%);

如何为HTML页面创建渐变背景

5 个答案: