4

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

谢谢。

4

3 回答 3

2

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

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

于 2010-03-25T15:26:44.677 回答
0

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

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

于 2010-03-25T15:19:41.457 回答
0

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

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

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

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

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

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

于 2012-01-23T22:16:44.723 回答