CSS中的背景渐变与使用图像的性能如何？

有任何一个,或者知道有谁,评估了使用背景渐变在CSS与使用图像的性能？

使用代码肯定更灵活,更有成效,但是使用css渐变的按钮,酒吧等还有一个缺点吗？

这是一个跨浏览器CSS渐变示例：

background: #1E5799; /* old browsers */
background: -moz-linear-gradient(top,#1E5799 0%,#2989D8 50%,#207cca 51%,#7db9e8 100%); /* firefox */

background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#1E5799),color-stop(50%,#2989D8),color-stop(51%,#207cca),color-stop(100%,#7db9e8)); /* webkit */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1E5799',endColorstr='#7db9e8',GradientType=0 ); /* ie */

background: -o-linear-gradient(top,#7db9e8 100%); /* opera */

解决方法

根据Webkit Wiki上的文章,图像效果更好：

Sometimes it’s tempting to use webkit’s drawing features,like -webkit-gradient,when it’s not actually necessary – maintaining images and dealing with Photoshop and drawing tools can be a hassle. However,using CSS for those tasks moves that hassle from the designer’s computer to the target’s cpu. Gradients,shadows,and other decorations in CSS should be used only when necessary (e.g. when the shape is dynamic based on the content) – otherwise,static images are always faster. On very low-end platforms,it’s even advised to use static images for some of the text if possible.

资料来源：https://trac.webkit.org/wiki/QtWebKitGraphics#Usestaticimages

当然,您必须平衡cpu时间与从服务器加载映像所需的额外时间.此外,对于Internet Explorer,过滤器非常慢,特别是如果您在一个页面上有很多.

原文地址：https://www.jb51.cc/css/216918.html