使用CSS渐变代替图片

Question

使用CSS来创建渐变而不是图片，这样做有什么负面影响吗？

例如下面的代码：

 #gradient {
  color: #fff;
  height: 100px;
  padding: 10px;
  /* For WebKit (Safari, Google Chrome etc) */
  background: -webkit-gradient(linear, left top, left bottom, from(#00f), to(#fff));
  /* For Mozilla/Gecko (Firefox etc) */
  background: -moz-linear-gradient(top, #00f, #fff);
  /* For Internet Explorer 5.5 - 7 */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF);
  /* For Internet Explorer 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF)";
 }

感谢您的选择。

- Wiika

---

请正确发布您的代码：http://stackoverflow.com/editing-help - Crozin

Answer 1

渐变色目前还没有标准化，很多浏览器不支持。在你的例子中，-moz-linear-gradient适用于Firefox 3.6，但旧版本不支持。如果你的网站是公开的，许多人可能看不到你的渐变色，所以你可以检查他们使用的浏览器版本，并基于此使用渐变色或图片。我在一个内部网站上使用渐变色（我可以强制用户使用特定的浏览器），如果浏览器不是Firefox 3.6或更高版本，则网站将只显示一条消息告诉用户升级，但这并不适用于公开网站。因此，我选择在公开网站上不使用渐变色。 :)

- Radu Maris

---

是的，你说得对，我有一个公共网站，而且并不是所有的用户都使用现代浏览器，他们中的大多数仍然使用Internet 6-7。页面中所有元素的另一种渐变方式是只使用一个透明图像（我相信是从白色到透明的渐变），但我不确定如何在Photoshop中制作它。 - Wiika

Answer 2

正如您在示例中所说明的那样，目前没有一种适用于所有常用浏览器的方法。出于维护和代码可读性的考虑，我认为这是一个“负面”的因素。

稍微提点建设性的批评：您要找的单词是“instead”，而不是“instant”。

- Syntactic

---

感谢Syntactic的快速回答，很抱歉我不是以英语为母语的人，RegDwight修改了我的留言。 - Wiika

Answer 3

CSS渐变在许多大型网站上都使用了您正在使用的回退。我会添加PIE.htc。如果您使用PIE，请记住它需要绝对或相对定位才能显示。

如果您必须支持非常旧的浏览器，则最好的方法是为它们提供回退的纯色背景。

对我来说，期望旧浏览器完全显示渐变是愚蠢的。如果您绝对必须这样做，可以设置有条件加载的样式表：

<!--[if lt IE 8]>
    <link rel="stylesheet" type="text/css" href="http://mysite/css/ie7_hacks.css" /><![endif]-->

在那里，你可以声明一个基于图像的重复渐变。就像CSS3之前的做法一样。

通过这种方式，您可以使您的网站对现代Web浏览器更快一点。

- Tai