4

我正在学习HTML。

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

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

body style="background-color:Powderblue"

我知道这不是渐变。

4

5 回答 5

7

这不能在 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))
    );   
}​

编辑：

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

于 2012-04-11T15:34:28.803 回答
2

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

如果您想了解更多关于 CSS3 渐变的信息，请阅读这篇文章

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

于 2012-04-11T15:33:38.547 回答
1

在外部表单中设置样式是一种更简单、更快捷、更有效的方式来设置网页样式，尤其是当您有多个链接到您的样式表的页面时。这允许您使用一行代码同时更改所有页面的整体样式。没关系，但是如果您有一个单独的页面，或者如果您需要一个简单的页面以使其本身看起来不同，则内联样式就足够了，但并不常见。请参阅下面的快速示例。

（每个页面的内联样式）

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

于 2014-04-23T04:52:59.467 回答
0

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

CSS 应该在单独的样式表中应用......永远不要应用内联样式。

于 2012-04-11T15:35:22.607 回答
0

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

只需在此处查看：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%);
于 2015-12-08T09:22:45.257 回答