如何为HTML页面创建渐变背景 [英] How to create a gradient background for an HTML page
问题描述
为HTML页面创建渐变背景的最佳方法是什么？
到目前为止，这是我的背景：
body style =background-color： Powderblue
我知道这不是一个渐变。
这不能在html中完成，但它可以在css中（特别是css3）。
$ b 您必须添加一个类到您的页面的主体或其中的一个div，围绕您的所有内容。您可以使用 css渐变生成器将代码放入您的css类。
以下是div上的一个简单示例： http://jsfiddle.net/8fDte/
如果您希望获得正文，您也可以执行以下操作。请注意，您必须链接到将存储样式的css文件。
$ b HTML
<！DOCTYPE HTML PUBLIC - // W3C // DTD HTML 4.01 // ENhttp://www.w3.org/TR/html4/strict.dtd >
< HTML>
< HEAD>
< LINK href =PathToCss.css =stylesheettype =text / css>
< / HEAD>
< BODY class =MyGradientClass>
< / BODY>
< / HTML>
CSS
<
.MyGradientClass
{
height：200px;
background-image：线性梯度（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（
线性，
左下，
左上，
彩色停止（0.25，rgb（113 ，
color-stop（0.63，rgb（147,92,93）），
color-stop（0.82，rgb（177,120,121））
）;
}
编辑：
正如Rory提到的，所有现代浏览器都不支持CSS3。但是，有一些工具，例如 PIE CSS 可以帮助IE接受一些CSS3功能。
I am in the process of learning HTML.
What is the best way to create a gradient background for an HTML page?
So far this is what I have as a background:
body style="background-color:Powderblue"
I know this is not a gradient.
This cannot be done in html but it can in css (specifically css3).
You would have to add a class to the body of your page or a div within it that surrounds all of your content. You can use a css gradient generator to get the code to put in your css class.
Here is a simple example on a div: http://jsfiddle.net/8fDte/
You can do the following as well if you want it on the body. Note you have to link to the css file that will store you styles.
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
This code can be generated by a css gradient generator like the one linked above.
.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))
);
}
Edit:
As Rory mentioned, CSS3 is not fully supported by all modern browsers. However, there are some tools such as PIE CSS to help IE to accept some CSS3 functionality.
这篇关于如何为HTML页面创建渐变背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
