如何制作没有图像的渐变背景？

Posted 2023-03-06

【中文标题】如何制作没有图像的渐变背景？

【英文标题】：How can you make a gradient background without images?

【发布时间】：2011-03-05 16:50:33

【问题描述】：

像这样。一般来说，我会制作 1 px 宽的图像，然后repeat-x。

但是是否可以使用 CSS3 制作相同类型的背景，如果可以，请告诉我 tp 如何制作相同的背景。

alt text http://shup.com/Shup/367066/110519102044-My-Desktop.png

与所有浏览器兼容 IE 8、7、6、FF、Chrome、Safari、iphone。

【参考方案1】：

几乎所有的浏览器都支持渐变。这是您需要的 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)";

【讨论】：

检查你的颜色。这是一个从浅灰色到白色的非常精致的。而且 Opera 根本不相信渐变。

好的，但为什么它不工作jsbin.com/iquje4/2 请你编辑这个以在我的问题中制作同样的渐变图像

是的，那是我糟糕的显示器... :D +1 给你。

【参考方案2】：

尝试一些可以通过 Google 搜索找到的 CSS 渐变生成器，例如： http://gradients.glrzad.com/

或

http://www.designdetector.com/demos/css-gradients-demo-1.php

另外，看看 Webkit 的渐变教程： http://webkit.org/blog/175/introducing-css-gradients/

和火狐： http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/

现在 - 请记住： 这是新的东西——CSS3，还没有最终确定。浏览器对 CSS3 的支持非常先进。您不会获得对您列出的浏览器的跨浏览器支持。最新的 Webkit（Safari、Google Chrome）和 Firefox 是您最好的选择。 IE 支持过滤器。不过 Opera 不支持任何类型的渐变。

【讨论】：

@metal-gear-solid - 是的，但你必须有一个 IE6 和 7 的备用渐变图像，如果 CSS 不起作用，则加载这些图像。

IE 做渐变，他们只是使用“过滤器”。

@Aaron Harun - 如果禁用 javascript，IE 过滤器是否有效

@Metal，他们应该。它们是纯 CSS。奇怪的 CSS，但仍然是 CSS。 msdn.microsoft.com/en-us/library/ms532847%28VS.85%29.aspx

【参考方案3】：

我认为 IE 6 和 7 可能不支持 CSS3 渐变。 尽管如此，您可以从这个站点获取 CSS 代码 http://gradients.glrzad.com/