应用css3渐变与jQuery [英] Applying css3 gradients with jQuery

问题描述

最后，我希望根据不同的东西动态地改变渐变，但是如何让jquery应用css3渐变？

  // works 
 $（element）.css（background-image，url（http://www.google.co.uk/images/logos/ps_logo2.png））; 
 
 //不起作用
 $（element）.css（background-image， -  webkit-gradient（linear，left bottom，right bottom，color-stop ，rgb（194,231,255）），color-stop（0.50，rgb（255,255,255）））; 
 
 //不起作用
 $（element）.css ， -  moz-linear-gradient（left center，rgb（194,231,255）28％，rgb（255,255,255）28％）; 
  

我还在尝试

  $（element）.css背景：-webkit-gradient（linear，left bottom，right bottom，color-stop（0.50，rgb（194,231,255）），color-stop（0.50，rgb（255,255,255）}）; 
  
 
 
 
这些方法是否无效？
解决方案
 p>你的第二种方法看起来很好...也许你需要css样式非webkit浏览器以及... 跨浏览器CSS渐变 
 
 
 
此在Chrome中为我工作 
  $（'＃block'）。css $ b background：-webkit-gradient（linear，left top，left bottom，from（#ccc），to（＃000））
} 
  
另请参阅： http://www.colorzilla.com/gradient-editor/  
 
Eventually, I wish to dynamically alter gradients based on different things, but how do I get jquery to apply a css3 gradient?
 //works
 $(element).css("background-image", "url(http://www.google.co.uk/images/logos/ps_logo2.png)");  

 //doesn't work
 $(element).css("background-image","-webkit-gradient(linear,left bottom,right bottom,color-stop(0.50, rgb(194,231,255)),color-stop(0.50, rgb(255,255,255))");

 //doesn't work
 $(element).css("background-image","-moz-linear-gradient(left center,rgb(194,231,255) 28%,rgb(255,255,255) 28%");
What am I missing? I've also tried 
 $(element).css({background: "-webkit-gradient(linear,left bottom,right bottom,color-stop(0.50, rgb(194,231,255)),color-stop(0.50, rgb(255,255,255)"});
Are these approaches not valid?
解决方案
Your second approach looks OK... Maybe you need to css styles for non-webkit browsers as well... Cross-Browser CSS Gradient

This works for me in Chrome
$('#block').css({
    background: "-webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000))" 
});
Also have a look at: http://www.colorzilla.com/gradient-editor/

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