测量吧！不是你喜欢的答案我认为，但它真的取决于复杂的CSS将是什么，因此需要多长时间被呈现。

在大多数情况下，它将是渲染时间（CSS版本）与请求开销和传输时间（映像版本）。你很可能会看到大数字在这里。由于您已在使用图片精灵，因此您将请求开销降至最低。

浏览器兼容性也应该是您应该注意的。

一些非常复杂的CSS3网站来展示我的意思： http://lea.verou.me/css3patterns/
这是一个非常好的案例研究，但令人难以置信的缓慢。加载时滞后。它滚动时滞后更多。我确信它比使用图像精灵的所有解决方案的解决方案慢得多。

不要对待我错了！我喜欢CSS，但图像也很好。有时甚至更精细。

摘要

测量！当你没有时间测量时，然后估计css会是多么复杂。当它趋向于变得复杂，然后使用图像。遇到兼容性问题后，请使用图片。

My project's creative designer and I have had some amicable disagreements as far as whether it is better to use slices of his comp or rely on the browser's rendering engine to create certain aspects of the user experience.

One specific example is with a horizontal "bar" that runs the entire width of the widget. He created a really snazzy gradient that involves several stops of different colors and opacities, and he feels that the small size of the image is preferable or at least comparable to the added lines of CSS code needed to generate the gradient natively.

We're already using CSS sprite technique to reduce the number of return trips from the server so that's not an issue for us. Right now it's simply the pro's and con's of using sliced up imagery versus rendering with CSS and HTML.

Is there a definitive rule as to how large an image needs to be to be the "worse" option of the two?

UPDATE: Since a few people have mentioned the complexity of the gradient as a factor I'm going to present it here:

-webkit-gradient(linear, left top, left bottom, color-stop(50%, rgb(0,0,0)), to(rgba(0,0,0,0.9)));

Very complex! ;-)

Measure it! Not the answer you like I think, but it really depends how complex the CSS will be and therefore how long it takes to be rendered.

In most cases it'll be the render time (CSS version) vs. request overhead and transmission time (image version). You will most probably see the big numbers here. Since you're already using image sprites you're reducing the request overhead to a minimum.

Browser compatibility should also be something you should be aware of. Here images will often win over CSS when it comes to gradients and something like that.

Some very complex CSS3-site to demonstrate what I mean: http://lea.verou.me/css3patterns/ This is a VERY nice case study, but incredible slow. It lags when loading. It lags even more when scrolling. And I am sure it is much slower than a solution using an image sprite for all of that.

Don't treat me wrong! I love CSS, but images are fine too. Sometimes even finer.

Summary

Measure it! When you do not have the time to measure, then estimate how complex the css would be. When it tends to get complex, then use images. When you've compatibility issues, then use images.