使用CSS渐变代替图像

使用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)";
 }

---

谢谢。

正如您在示例中所说明的，目前没有一种方法可以在所有常用浏览器中使用。我认为这是一个“负”的维护和代码可读性的目的。

---

一点建设性的批评：你想要的词是“取而代之”，而不是“瞬间”。

渐变尚未标准化，许多浏览器不支持它，在你的例子中，

-moz linear gradient

在firefox 3.6中有效，但在旧版本中不起作用。如果你的网站是出于公共目的，很多人不会看到你的渐变，所以你可以检查他们使用的浏览器版本，并基于此使用渐变或图像。我在intranet站点上使用渐变（我可以强制用户使用特定的浏览器），如果浏览器不是Firefox 3.6或更高版本，该站点将只显示一条消息，告诉用户升级，但如果您公开，这不是一个好方法

---

因此，我选择公共网站为负数。：）

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

如果您必须支持非常旧的浏览器，最好的方法是为它们提供一个备用的纯色背景

希望旧浏览器显示渐变是愚蠢的。如果必须，可以设置有条件加载的样式表：

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

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

---

通过这种方式，您可以使您的网站在现代网络浏览器中运行得更快。

请正确发布您的代码：感谢您的快速回答，很抱歉，我不是英语母语人士，RegDwight确实更改了我的信息是的，您是对的，我有一个公共网站，并且不是所有用户都使用现代浏览器，他们中的大多数仍然使用internet 6-7，还有另一种方法可以对页面中的所有元素进行渐变，即只使用一个透明图像（渐变：我相信是白色到透明），但我不确定如何在photoshop中进行渐变