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

感谢。

Answer 1

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

所以我选择负面的公共网站。：）

Answer 2

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

一些建设性的批评：你所寻找的词是“反而”，而不是“即时”。

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之前完成的那样。

通过这种方式，您可以使您的网站更快地用于现代网络浏览器。

使用CSS渐变而不是图像

3 个答案: