使用 CSS 渐变代替图像答案

【问题标题】：Using CSS gradient instead of images使用 CSS 渐变代替图像
【发布时间】：2010-03-25 15:15:20
【问题描述】：

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

谢谢。

【问题讨论】：

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

标签： css image gradient

【解决方案1】：

渐变尚未标准化，许多浏览器不支持它，在您的示例中，-moz-linear-gradient 在 firefox 3.6 中有效，但在旧版本中不支持。如果您的网站是用于公共目的，很多人不会看到您的渐变，因此您可以检查他们使用的浏览器版本，并基于此使用渐变或图像。我在内网网站上使用渐变（我可以强制用户使用特定的浏览器），如果浏览器不是 Firefox 3.6 或更高版本，该网站将只显示一条消息，告诉用户升级，但这不是一个好如果你公开的话。

所以我选择否定公共网站。 :)

【讨论】：

是的，你说得对，我有一个公共网站，并不是我的所有用户都使用现代浏览器，他们中的大多数人仍然使用互联网 6-7，页面中所有元素的渐变还有另一种方法是只使用一张透明图像（我相信渐变：白色到透明），但我不知道如何在 Photoshop 中制作它

【解决方案2】：

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

一点建设性的批评：您要寻找的词是“代替”，而不是“即时”。

【讨论】：

感谢 Syntactic 的快速回答，很抱歉，我的母语不是英语，RegDwight 确实改变了我的信息

【解决方案3】：

许多大型网站都使用 CSS 渐变，使用您正在使用的后备。我也会添加 PIE.htc。如果您确实使用 PIE，请记住它需要绝对或相对定位才能显示出来。

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

期望旧浏览器完全显示渐变是愚蠢的。如果您绝对需要，您可以设置一个有条件加载的样式表：

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

您可以在其中声明基于图像的重复渐变。就像在 CSS3 之前的做法一样。

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

【讨论】：