Question

几年前，我见过很多使用background-image: url(xxx.png)模拟渐变背景滤镜的CSS代码，因为只有（请纠正，如果我在这里错了）IE专有过滤器将提供CSS渐变。

如今 - 请记住当今最常用的浏览器和便携式设备浏览器（智能手机/平板电脑），我应该使用：

CSS渐变，每个引擎有1个背景属性

OR

background-image：url（xxx.png），1张小图片（但仍然是浏览器请求）;

吗

我在一些CSS梯度生成器（即collorzilla）中看到IE9问题怎么样？

更新：对不起，我不是很清楚..我的问题是不是“如何这样做”，是关于更高效，可接受或正确的方式。谢谢！

Answer 1

这是一个非常敏感的问题。在我工作的公司，我们根据客户和他们网站的观点进行了一些研究。结论是：IE8的用户很多。

有几种方法可以使渐变css工作，即我所知道的最好的一种方法是css3 pie：css3pie

然而，像素宽度或高度的图像格式圆角几乎不可忽视，唯一的问题是它会更多地生成请购单。

所以我的意见是使用css3pie ......它也可能适用于智能手机。

抱歉英文不好。

Answer 2

所以我自己也有同样的问题，希望找到关于性能的最佳解决方案，我得出了以下结论：

Pro Gradient：

图像会占用带宽，因此首次获取图像时可能需要更长时间。话虽如此，重要的是要记住浏览器缓存这些文件，并且使用格式正确的图像，这仍然是一个问题。最大的影响可能是休闲用户首次登录互联网接收有问题的偏远地区。
渐变元素更灵活。图像可能取决于硬编码尺寸在其定义的元素中正确显示，而渐变可以更好地适应环境。
本着灵活性的精神，您还可以考虑不仅可以修改尺寸，在通过javascript动态设置时，您可以更好地控制背景本身。

Pro Image：

浏览器难以显示渐变。您要求浏览器自己构建图像，而不是显示已经制作的图像。这可能是较旧或功能较弱的设备的问题，因为它们可能无法像您希望的那样快速运行。
图像可以允许更复杂的图案，（例如：您需要围绕三角形的渐变）。根据您的目标，渐变可能能够来执行此操作，但CSS可能会很快变得复杂。

这些是我能想到的因素，希望我没有留下任何重大的东西。至于我走的方向，我倾向于最终使用渐变，以获得前面提到的灵活性。带宽也是一个值得关注的问题，因为我经常让这些偏远地区的用户接待很多。

Answer 3

你可以做HTML5 Boilerplate所做的事情：

<!DOCTYPE html>
<!--[if lt IE 7]><html class="lt-ie10 lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]>   <html class="lt-ie10 lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]>   <html class="lt-ie10 lt-ie9"><![endif]-->
<!--[if IE 9 ]>  <html class="lt-ie10"><![endif]-->
<!--[if gt IE 9]><!--> <html class=""><!--<![endif]-->

现在你有一个<html>的IE类：

IE6 - ＆gt; lt-ie10，lt-ie9，lt-ie8，lt-ie7
IE7 - ＆gt; lt-ie10，lt-ie9，lt-ie8，
IE8 - ＆gt; lt-ie10，lt-ie9
IE9 - ＆gt; LT-IE10

在你的CSS中：

.element { background-image: /*Your CSS3 gradient declaration */; }
.lt-ie10 { background-image: url(/*Your PNG file*/); }

CSS渐变vs背景图像？

3 个答案: