您好,我想为所有使用 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。
如何设置所有这些设置?
最佳答案
From the jQuery 1.8 Blog's release
自动 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);
}
Which came from the link -- a working jsFiddle
所以这两种方法中的一种应该适合您。
关于javascript - 使用 jquery 设置所有 css3 背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13258069/