Html 如何制作没有图像的渐变背景？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3074397/
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 can you make a gradient background without images?
提问by Jitendra Vyas
Like this. in general i will make 1 px wide image of this then will repeat-x.
像这样。一般来说，我会制作 1 px 宽的图像，然后会repeat-x。
but is it possible to make same type of background with CSS3 , if yes then tell me how tp make same of this.
但是是否可以使用 CSS3 制作相同类型的背景，如果是，请告诉我 tp 如何制作相同的背景。
alt text http://shup.com/Shup/367066/110519102044-My-Desktop.png
替代文字 http://shup.com/Shup/367066/110519102044-My-Desktop.png
with all browser compatibility IE 8, 7, 6 , FF , Chrome, Safari, iphone.
与所有浏览器兼容 IE 8, 7, 6 , FF , Chrome, Safari, iphone。
回答by Aaron Harun
Pretty much all of the browsers support gradients. Here's the CSS you need:
几乎所有浏览器都支持渐变。这是您需要的 CSS：
.gradient{
/* For any browser that can't create a gradient */
background-color: #EFEFEF;
/*//mozilla*/
background: -moz-linear-gradient(top, #efefef, #FFF);
/* Chrome/Safari */
background: -webkit-gradient(linear, left top, left bottom, from(#EFEFEF), to(#FFF));
/*IE 6/7 */ filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#EFEFEF',EndColorStr='#FFF');
/*IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#EFEFEF, endColorstr=#FFF)";
}
回答by desau
Try some of the CSS gradient generators that you can find with a Google search, such as: http://gradients.glrzad.com/
尝试一些可以通过 Google 搜索找到的 CSS 渐变生成器，例如：http: //gradients.glrzad.com/
or
或者
http://www.designdetector.com/demos/css-gradients-demo-1.php
http://www.designdetector.com/demos/css-gradients-demo-1.php
Also, take a look at Webkit's gradient tutorial: http://webkit.org/blog/175/introducing-css-gradients/
另外，看看Webkit的渐变教程：http: //webkit.org/blog/175/introducing-css-gradients/
And Firefox: http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/
和 Firefox：http: //hacks.mozilla.org/2009/11/css-gradients-firefox-36/
Now - that in mind: This is new stuff -- CSS3, which isn't finalized yet. Browser support for CSS3 stuff is very cutting edge. You're not going to get cross browser support for the browsers you've listed. Latest Webkit (Safari, Google Chrome) and Firefox are your best bets. IE supports filters. Opera doesn't support any kind of gradients though.
现在 - 请记住：这是新东西 - CSS3，尚未最终确定。浏览器对 CSS3 的支持非常前沿。您不会获得对您列出的浏览器的跨浏览器支持。最新的 Webkit（Safari、Google Chrome）和 Firefox 是您最好的选择。IE 支持过滤器。Opera 不支持任何类型的渐变。
回答by Zeal
I think IE 6 and 7 may not support CSS3 gradient. Even though, you can get the CSS code from this site http://gradients.glrzad.com/
我认为 IE 6 和 7 可能不支持 CSS3 渐变。尽管如此，你可以从这个站点http://gradients.glrzad.com/获取 CSS 代码
