渐变背景不适用于Chrome [英] Gradient background is not working with Chrome

问题描述

 背景：-moz - 线性梯度（中心顶，＃CAF579，＃73CA08）重复滚动0 0透明; 
 

我也使用了WebKit，但仍然无法工作。

解决方案

每个浏览器对于渐变背景都有不同的语法。此代码应涵盖使用最广泛的浏览器：

  #gradient {
 / *对于WebKit等等）* / 
 background：-webkit-gradient（linear，left top，right bottom，from（＃CAF579），to（＃73CA08））; 
 / *对于Mozilla / Gecko（Firefox等）* / 
 background：-moz-linear-gradient（left top，＃CAF579，＃73CA08） 
 / *对于Internet Explorer 5.5  -  7 * / 
 filter：progid：DXImageTransform.Microsoft.gradient（startColorstr =＃CAF579FF，endColorstr =＃73CA08FF）; 
 / *对于Internet Explorer 8 * / 
 -ms-filter：progid：DXImageTransform.Microsoft.gradient（startColorstr =＃CAF579FF，endColorstr =＃73CA08FF） 
} 
  

您可以在这里看到更多： http://robertnyman.com/2010/02/15/css- gradients-for-all-web-browsers-without-using-images /

Hello I am using following code that works fine with Firefox, but does not work in Chrome.

background: -moz-linear-gradient(center top , #CAF579, #73CA08) repeat scroll 0 0 transparent;

I used WebKit also, but still it's not working.

解决方案

Each browser has different syntax for gradient backgrounds. This code should cover the most widely used browsers:

#gradient {
    /* For WebKit (Safari, Google Chrome etc) */
    background: -webkit-gradient(linear, left top, right bottom, from(#CAF579), to(#73CA08));
    /* For Mozilla/Gecko (Firefox etc) */
    background: -moz-linear-gradient(left top, #CAF579, #73CA08);
    /* For Internet Explorer 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#CAF579FF, endColorstr=#73CA08FF);
    /* For Internet Explorer 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#CAF579FF, endColorstr=#73CA08FF)";
}

You can see more here: http://robertnyman.com/2010/02/15/css-gradients-for-all-web-browsers-without-using-images/

这篇关于渐变背景不适用于Chrome的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！