我想添加以下背景渐变
$('.colorshiftdots:nth-child(1) .colorshiftfilter').each(function() {
var styles = {
'background': '-webkit-gradient(linear, right top, left top, from(rgba(' + backgroundcolor + ', 1)), color-stop(55%, rgba(' + backgroundcolor + ', .13)), color-stop(70%, rgba(0, 0, 0, 0)), to(rgba(255, 255, 255, 1)))',
'background': '-o-linear-gradient(right, rgba(' + backgroundcolor + ', 1) 0%, rgba(' + backgroundcolor + ', .13) 55%, rgba(0, 0, 0, 0) 70%, rgba(255, 255, 255, 1) 100%)',
'background': 'linear-gradient(-90deg, rgba(' + backgroundcolor + ', 1) 0%, rgba(' + backgroundcolor + ', .13) 55%, rgba(0, 0, 0, 0) 70%, rgba(255, 255, 255, 1) 100%)',
'opacity': '1'
};
$(this).css(styles);
});问题是只有最后一个得到应用，因为属性都是相同的。
1条答案
按热度按时间33qvvth11#
正如您所注意到的，由于
styles对象的同一个属性（这里是'background'）不能有三个不同的条目，所以styles对象实际上只包含最后一行，这就是为什么当您调用.css(styles)时会得到'linear-gradient'。要实现特定于供应商的CSS代码，jQuery提供cssHookshttp://api.jquery.com/jQuery.cssHooks/
但是，您也可以尝试只使用标准定义（即最后一行），并查看jQuery在Safari或Opera上运行时是否动态输出特定于供应商的代码（这正是jQuery的要点）。