使用 jQuery,它将是:
$('.gradient').css({'background-image': 'linear-gradient(to top, #2E2E28 0%, #4D4C48 100%)'});
对于野生动物园:
$('.gradient').css({'background-image': '-webkit-linear-gradient(top, #2E2E28 0%, #4D4C48 100%)'});
请参阅此处以获取实时示例。
似乎可以跨浏览器工作。
编辑:
我做了一个小插件,可以帮助你使用不同的颜色:
;(function($) {
var isSafari = /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor);
var methods = {
init: function (settings) {
settings = $.extend( {
'colors' : ['red', 'blue'],
'direction' : 'top'
}, settings);
return this.each(function(){
if($.isArray(settings.colors) && settings.colors.length >= 2) {
$(this).css({
'background':
methods.gradientToString(settings.colors, settings.direction)
});
} else {
$.error('Please pass an array');
}
});
},
gradientToString: function (colors, direction) {
var nbColors = colors.length;
//If no percent, we need to calculate them
if(colors[0].percent === undefined) {
//Passed only colors as an array we make it an object
if(colors[0].color === undefined) {
var tmp = [];
for(i=0; i < nbColors; i++)
tmp.push({'color':colors[i]});
colors = tmp;
}
var p = 0,
percent = 100 / (nbColors - 1);
//calculate percent
for(i=0; i< nbColors; i++) {
p = i === 0 ? p : (i == nbColors-1 ? 100 : p + percent);
colors[i].percent = p;
}
}
var to = isSafari ? '' : 'to';
//build the string
var gradientString = isSafari ? '-webkit-linear-gradient(' : 'linear-gradient(';
gradientString += to +' '+ direction;
for(i=0; i < nbColors; i++)
gradientString += ', '+ colors[i].color + ' ' + colors[i].percent + '%';
gradientString += ')';
return gradientString;
}
};
$.fn.gradientGenerator = function () {
return methods.init.apply( this, arguments );
};
})(jQuery);
例如像这样使用它:
$('.gradient').gradientGenerator({
colors : ['#2E2E28', '#4D4C48']
});
$('.change-color').on('click', function(e) {
e.preventDefault();
$('.gradient').gradientGenerator({
colors : [{color:'#4D4C48',percent:0}, {color:'#282827', percent:30}, {color:'#2E2E28', percent: 100}],
direction : 'left'
});
});
看到它在这里工作。