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

发布时间：2020-12-14 21:15:23 所属栏目：资源来源：网络整理

导读：我正在学习HTML. 为HTML页面创建渐变背景的最佳方法是什么？到目前为止,这是我的背景： body style="background-color:Powderblue" 我知道这不是一个渐变. 解决方法这不能在html中完成,但它可以在css(特别是css3)中完成. 您必须在页面正文中添加一个类,或

我正在学习HTML.

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

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

body style="background-color:Powderblue"

我知道这不是一个渐变.

解决方法

这不能在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,121) 82%);
    background-image: -moz-linear-gradient(bottom,121) 82%);
    background-image: -webkit-linear-gradient(bottom,121) 82%);
    background-image: -ms-linear-gradient(bottom,121) 82%);

    background-image: -webkit-gradient(
        linear,left bottom,left top,color-stop(0.25,62)),color-stop(0.63,93)),color-stop(0.82,121))
    );   
}?

编辑：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!