如何为 HTML 页面创建渐变背景
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10109132/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create a gradient background for an HTML page
提问by alpha_nom
I am in the process of learning HTML.
我正在学习 HTML。
What is the best way to create a gradient background for an HTML page?
为 HTML 页面创建渐变背景的最佳方法是什么？
So far this is what I have as a background:
到目前为止，这是我的背景：
body style="background-color:Powderblue"
I know this is not a gradient.
我知道这不是渐变。
回答by Josh Mein
This cannot be done in html but it can in css (specifically css3).
这不能在 html 中完成，但可以在 css（特别是 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 generatorto get the code to put in your css class.
您必须在页面正文中添加一个类，或者在其中添加一个围绕所有内容的 div。您可以使用css 渐变生成器来获取要放入 css 类的代码。
Here is a simple example on a div: http://jsfiddle.net/8fDte/
这是一个关于 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.
如果您想在身体上使用它，您也可以执行以下操作。请注意，您必须链接到将存储您的样式的 css 文件。
HTML
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
This code can be generated by a css gradient generator like the one linked above.
这段代码可以由像上面链接的那样的 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))
);
}?
Edit:
编辑：
As Rory mentioned, CSS3 is not fully supported by all modern browsers. However, there are some tools such as PIE CSSto help IE to accept some CSS3 functionality.
正如 Rory 所提到的，并非所有现代浏览器都完全支持 CSS3。但是，有一些工具如PIE CSS可以帮助 IE 接受一些 CSS3 功能。
回答by Rory McCrossan
It's not possible to make a gradient with HTML alone. There are new features in CSS3 which allow you to create a gradient, however these are not fully supported by all browsers.
单独使用 HTML 制作渐变是不可能的。CSS3 中有一些新功能允许您创建渐变，但并非所有浏览器都完全支持这些功能。
If you'd like to read some more about CSS3 gradients, read this article
如果您想了解更多关于 CSS3 渐变的信息，请阅读这篇文章
There is also a handy online tool which will create the CSS code to create a gradient of your specification, here.
还有一个方便的在线工具，可以创建 CSS 代码以创建规范的渐变，请点击此处。
回答by jhawk
Styling in external sheets is a much easier, faster and more efficient way to style your web pages especially if you have several pages that link to your style sheet(s). This allows you to change the entire styling of all of your pages at the same time with one line of code. It is ok however if you have a single page that you have up or if you need a simple page to look different by itself, inline styling is sufficient but not common. See below for quick example.
在外部表单中设置样式是一种更容易、更快和更有效的方式来设置您的网页样式，尤其是当您有多个页面链接到您的样式表时。这允许您使用一行代码同时更改所有页面的整个样式。但是，如果您有一个单独的页面，或者如果您需要一个简单的页面来使其本身看起来不同，那么内联样式就足够了，但并不常见。请参阅下面的快速示例。
(inline styling for each page)
（每个页面的内联样式）
<!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>
....or it would b like this
....或者它会是这样的
<!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>
and your "yourcssheet.css" style sheet would look like this
你的“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*/
Now instead of going through every style on each individual page head, you can simply change it all with a simple external sheet all linked together by the following.
现在，您无需检查每个单独页面标题上的每种样式，只需使用以下链接在一起的简单外部表即可更改所有样式。
Hope this helps. [email protected]
希望这可以帮助。[email protected]
回答by Kamal Kumar
There are many online tools that create Gradients. Either you can use them or you can create your own
有许多在线工具可以创建渐变。您可以使用它们，也可以创建自己的
Simply check here: http://www.cssmatic.com/gradient-generator
Also you can create your own by this way
您也可以通过这种方式创建自己的
CSS
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%);
回答by hcharge
Use this http://www.colorzilla.com/gradient-editor/
使用这个http://www.colorzilla.com/gradient-editor/
CSS should be applied in a separate stylesheet... never apply styling inline.
CSS 应该在单独的样式表中应用...永远不要应用内联样式。
