CSS渐变vs背景图像？

Question

Some years ago, I've seen a lot of CSS codes using background-image: url(xxx.png) simulating a gradient background filter, since only (please, correct if I'm wrong here) IE proprietary filter would provide CSS gradient. 几年前，我见过很多CSS代码使用background-image: url(xxx.png)模拟渐变背景滤镜，因为只有（请纠正，如果我错了）IE专有滤镜会提供CSS渐变。

Nowadays - keeping in mind the most used browsers today and portable devices browsers (smartphones/tablets), should I use: 如今 - 请记住当今最常用的浏览器和便携式设备浏览器（智能手机/平板电脑），我应该使用：

CSS gradients, with 1 background property for each engine CSS渐变，每个引擎有1个背景属性

OR 要么

background-image: url(xxx.png), 1 tiny image (but still a browser request); background-image：url（xxx.png），1个小图片（但仍然是浏览器请求）;

? ？

And how about IE9 issue there I have seen in some CSS gradient generators (ie collorzilla)? 我在一些CSS梯度生成器（即collorzilla）中看到IE9问题怎么样？

UPDATE: sorry I wasn't very clear.. my question is not "how to do that", is about wich is more efficient , acceptable or the correct way . 更新：抱歉，我不是很清楚..我的问题不是“如何做到”，而是更高效 ， 可接受或正确的方式 。 thanks! 谢谢！

Answer 1

Here is a very sensitive issue. 这是一个非常敏感的问题。 In the company where I work, we did some research based on our customers and the views of their sites. 在我工作的公司，我们根据客户和他们网站的观点进行了一些研究。 The conclusion was: there are many users of IE8. 结论是：IE8有很多用户。

There are several ways to make the gradient css work in ie, one of the best I know is css3 pie: css3pie 有几种方法可以使渐变css工作，即我所知道的最好的一种方法是css3 pie： css3pie

However, an image format fillet, with a pixel width or height weighs almost inconsiderable, the only concern is that it generates a requisition more. 但是，像素宽度或高度的图像格式圆角的重量几乎是微不足道的，唯一的问题是它会更多地生成请购单。

So my opnion in my case was to use the css3pie ... it will probably work on smartphones as well. 所以我的意见是使用css3pie ......它也可能适用于智能手机。

Sorry for bad english. 抱歉英文不好。

Answer 2

So I had this same question myself, hoping to find the best solution with regards to performance, and I had come to the following conclusions: 所以我自己也有同样的问题，希望找到关于性能的最佳解决方案，我得出以下结论：

Pro Gradient: Pro Gradient：

Images can take up bandwidth, so when first fetching the image it may take longer. 图像可能会占用带宽，因此首次获取图像时可能需要更长时间。 That being said, it is important to remember that the browser caches these files, and with properly formatted images this becomes less of an issue still. 话虽如此，重要的是要记住浏览器缓存这些文件，并且使用格式正确的图像，这仍然是一个问题。 The biggest impact would likely be on casual users logging in for the first time in remote areas where internet reception is questionable. 最大的影响可能是休闲用户首次登录互联网接收有问题的偏远地区。
Gradient elements are more flexible. 渐变元素更灵活。 Images may depend on having hard coded dimensions to display properly in the element they define, whereas gradients can adapt to the environment a little better. 图像可能取决于具有硬编码尺寸以在它们定义的元素中正确显示，而渐变可以更好地适应环境。
In the spirit of flexibility, you can also consider that it isn't just the dimensions that can be modified, you'll have more control of the background itself when setting it on the fly through javascript. 本着灵活性的精神，您还可以考虑不仅可以修改的维度，在通过javascript动态设置时，您可以更好地控制背景本身。

Pro Image: 专业形象：

Gradients are harder for the browser to display. 浏览器难以显示渐变。 Rather than showing an image already made, you are asking the browser to construct the image itself. 您要求浏览器自己构建图像，而不是显示已经制作的图像。 This may be an issue on older or less capable devices, as they may not run as quickly or as well as you may like. 这可能是较旧或功能较弱的设备的问题，因为它们可能无法像您希望的那样快速或尽可能地运行。
Images can allow for more complex patterns, (eg: you want a gradient around a triangular shape). 图像可以允许更复杂的图案，（例如：您需要围绕三角形的渐变）。 Depending on what you're going for, a gradient may be able to do it, but the CSS could get complicated very quickly. 根据你要什么，一个梯度可能是能够做到这一点，但CSS可以很快得到复杂。

Those are the factors that I could come up with, hopefully I didn't leave anything big out. 这些是我能想到的因素，希望我没有留下任何重大的东西。 As for the direction I went, I tend to end up using gradients, for the aforementioned flexibility. 至于我走的方向，我倾向于最终使用渐变，以获得前面提到的灵活性。 Bandwidth was also somewhat of a concern, as I regularly have users in these remote areas with shotty reception. 带宽也有点令人担忧，因为我经常在这些偏远地区接待用户。

Answer 3

You could do what HTML5 Boilerplate does: 您可以执行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]-->

Now you have a <html> with classes for IE: 现在你有了一个带有IE类的<html> ：

IE6 --> lt-ie10, lt-ie9, lt-ie8, lt-ie7 IE6 - > lt-ie10，lt-ie9，lt-ie8，lt-ie7
IE7 --> lt-ie10, lt-ie9, lt-ie8, IE7 - > lt-ie10，lt-ie9，lt-ie8，
IE8 --> lt-ie10, lt-ie9 IE8 - > lt-ie10，lt-ie9
IE9 --> lt-ie10 IE9 - > lt-ie10

And in your CSS: 在你的CSS中：

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

CSS渐变vs背景图像？

问题描述

3 个解决方案

解决方案1
3 已采纳 2013-09-10 19:14:36

解决方案2
1 2018-04-03 17:24:20

解决方案3
0 2013-09-10 22:01:28

CSS渐变vs背景图像？

问题描述

3 个解决方案

解决方案1 3 已采纳 2013-09-10 19:14:36

解决方案2 1 2018-04-03 17:24:20

解决方案3 0 2013-09-10 22:01:28

解决方案1
3 已采纳 2013-09-10 19:14:36

解决方案2
1 2018-04-03 17:24:20

解决方案3
0 2013-09-10 22:01:28