用jquery设置所有css3 background-image
嗨，我想用jquery为所有浏览器设置background-image ：
background-image:linear-gradient(green, blue); /* Norme W3C */ background-image:-moz-linear-gradient(green, blue); /* Firefox */ background-image:-webkit-gradient(linear, green, blue); /* Chrome, Safari */ background-image:-o-linear-gradient(green, blue); /* Opera */ background-image:-ms-linear-gradient(green, blue); /* IE */
我这样设置：
$("#"+elmt).css("background-image" , "linear-gradient("+hex+","+$('#test2').val()+")" );
仅适用于W3C，但它适用于Firefox，但不适用于Chrome。
如何设置所有这些设置？
来自jQuery 1.8 Blog的发布
自动CSS前缀：当您在.css（）或.animate（）中使用CSS属性时，我们将为该浏览器使用正确的前缀属性（适当时）。 例如，取.css（“user-select”，“none”）; 在Chrome / Safari中，我们将值设置为“-webkit-user-select”，Firefox将使用“-moz-user-select”，IE10将使用“-ms-user-select”。
升级到最新版本，应自动处理。
编辑
这应该自动工作，以下应该在jQuery 1.8中实现，
var cssPrefixString = {}; var cssPrefix = function(propertie) { if (cssPrefixString[propertie] || cssPrefixString[propertie] === '') return cssPrefixString[propertie] + propertie; var e = document.createElement('div'); var prefixes = ['', 'Moz', 'Webkit', 'O', 'ms', 'Khtml']; // Various supports... for (var i in prefixes) { if (typeof e.style[prefixes[i] + propertie] !== 'undefined') { cssPrefixString[propertie] = prefixes[i]; return prefixes[i] + propertie; } } return false; };
用法
var cssTransform = cssPrefix('Transform'); // "MozTransform" or "WebkitTransform" if (cssTransform ) { var cssProp = {}; cssProp['border'] = '1px solid rgba(0, 0, 0, .5)'; cssProp[cssPrefix('Transform')] = 'rotate(20deg)'; cssProp[cssPrefix('borderRadius')] = '5px'; // Keep the camelCaze (jQuery like) cssProp[cssPrefix('boxShadow')] = '2px 2px 6px grey'; $('div#myDiv').css(cssProp); // console.log(cssProp); }
这来自链接 – 一个有效的jsFiddle
所以这两种方法中的一种应该适合你。
你可以改为使用-prefix-free ： http ： //leaverou.github.com/prefixfree/
它会动态地为CSS添加供应商前缀。