我正在添加一个需要多浏览器 CSS 的动态渐变;如果针对一个浏览器它可以工作,甚至如果写在 CSS 文件中也可以工作,但是在 jquery 中使用 .css() 方法它无法加载背景。要了解我在这里尝试做的事情是我的代码示例,该示例在添加所有浏览器 CSS 时不起作用......
if ($jj(this).scrollTop() > 200 && $el.css('position') != 'fixed'){
$jj('.fixedElement').css({
'position': 'fixed', 'top': '0px', 'z-index': '9999',
'width': '120%','paddingRight': '20%', 'paddingLeft': '20%',
'marginLeft': '-10%', 'left': '0', 'boxShadow': '0 3px 5px #888888',
'lineHeight': '100%',
'background': '#00172A',
'background': '-moz-linear-gradient(top, #00172A 80%, #2F71B3 100%)',
'background': '-o-linear-gradient(top, #00172A 80%, #2F71B3 100%)',
'background': '-webkit-gradient(linear, left top, left bottom, color-stop(80%,#00172A), color-stop(100%,#2F71B3))',
'background': '-webkit-linear-gradient(top, #00172A 80%, #2F71B3 100%)',
'background': '-ms-linear-gradient(top, #00172A 80%, #2F71B3 100%)',
'filter': 'progid:DXImageTransform.Microsoft.gradient( startColorstr=\'#00172A\', endColorstr=\'#2F71B3\',GradientType=0 )',
'background': 'linear-gradient(top, #00172A 80%, #2F71B3 100%)',
'color': '#ffffff'
});
在使用单个“后台”调用时,它将在所选浏览器中工作,例如这在 Firefox 中工作......
if ($jj(this).scrollTop() > 200 && $el.css('position') != 'fixed'){
$jj('.fixedElement').css({
'position': 'fixed', 'top': '0px', 'z-index': '9999',
'width': '120%','paddingRight': '20%', 'paddingLeft': '20%',
'marginLeft': '-10%', 'left': '0', 'boxShadow': '0 3px 5px #888888',
'lineHeight': '100%',
'background': '-moz-linear-gradient(top, #00172A 80%, #2F71B3 100%)',
'color': '#ffffff'
});
您可以在http://www.thediabetesnetwork.com上找到实时代码。 编辑:通过从 json 对象中删除 css 并使用 jquery api 来修复。请注意调用是如何包装在 json 括号中并使用 json 语法的。这就是问题所在。现在看起来像这样。
if ($jj(this).scrollTop() > 200 && $el.css('position') != 'fixed'){
$jj('.fixedElement').css('background', 'linear-gradient(top, #00172A 80%, #2F71B3 100%)');
$jj('.fixedElement').css('background', '-ms-linear-gradient(top, #00172A 80%, #2F71B3 100%)');
$jj('.fixedElement').css('background', '-moz-linear-gradient(top, #00172A 80%, #2F71B3 100%)');
$jj('.fixedElement').css('background', '-o-linear-gradient(top, #00172A 80%, #2F71B3 100%)');
$jj('.fixedElement').css('background', '-webkit-linear-gradient(top, #00172A 80%, #2F71B3 100%)');
$jj('.fixedElement').css('background', '-webkit-gradient(linear, left top, left bottom, color-stop(80% #00172A), color-stop(100%,#2F71B3))');
$jj('.fixedElement').css(
{
'position': 'fixed',
'top': '0',
'z-index': '9999',
'width': '120%',
'paddingRight': '20%',
'paddingLeft': '20%',
'marginLeft': '-10%',
'left': '0',
'boxShadow': '0 3px 5px #888888',
'lineHeight': '100%',
'paddingTop': '0',
'paddingBottom': '0',
'color': '#ffffff'
});