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

Josh Mein..

7

这不能在html中完成,但它可以在css(特别是css3)中完成.

您必须在页面正文中添加一个类,或者在其中包含所有内容的div.您可以使用css渐变生成器来获取要放入css类的代码.

如果您想在身体上进行,也可以执行以下操作.请注意,您必须链接到将存储样式的css文件.

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功能.