définir toute l’image de fond css3 avec jquery

salut je veux définir l’ background-image de background-image pour tous les navigateurs avec jquery:

 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 */ 

et je l’ai mis comme ça:

$("#"+elmt).css("background-image" , "linear-gradient("+hex+","+$('#test2').val()+")" );

seulement pour le W3C mais cela fonctionne sur firefox mais pas sur Chrome.

Comment puis-je définir tous ces parameters?

Depuis la publication du blog jQuery 1.8

Préfixe CSS automatique: lorsque vous utilisez une propriété CSS, que ce soit en .css () ou .animate (), nous utilisons la propriété préfixée correcte (le cas échéant) pour ce navigateur. Par exemple, prenez .css (“user-select”, “none”); dans Chrome / Safari, la valeur est “-webkit-user-select”, Firefox utilisera “-moz-user-select” et IE10 utilisera “-ms-user-select”.

Mettez à niveau vers la dernière version et cela devrait être géré automatiquement.

modifier

Cela devrait fonctionner automatiquement, ce qui suit devrait être implémenté dans jQuery 1.8,

 var cssPrefixSsortingng = {}; var cssPrefix = function(propertie) { if (cssPrefixSsortingng[propertie] || cssPrefixSsortingng[propertie] === '') return cssPrefixSsortingng[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') { cssPrefixSsortingng[propertie] = prefixes[i]; return prefixes[i] + propertie; } } return false; }; 

L’usage

 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); } 

Qui venait du lien – un jsFiddle de travail

Donc, une de ces deux méthodes devrait fonctionner pour vous.

Vous pouvez plutôt utiliser simplement -prefix-free : http://leaverou.github.com/prefixfree/

Il ajoute dynamicment des préfixes de fournisseur à votre CSS.