1

我正在尝试background-image根据变量的值设置一个元素的属性。它只在第一次工作。当我切换到就绪状态时，背景图像停止变化。图像本身很小 - 大约 8-10 kB。

这是我的代码：

if(status != '') {
    console.log('status');
    console.log(status);

    switch(status) {
        case 'dev':
            $('#status').css('background-position','0px -160px');
            break;
        case 'ready':
            $('#status').css('background-position','0px -240px');
            break;
        case 'soon':
            $('#status').css('background-position','0px 0px');
            break;
        case 'design':
            $('#status').css('background-position','0px -80px');
            break;
    }
    }

这里是元素的 CSS：

#status {
z-index: 1;
float: right;
height: 80px;
width: 80px;
background: url(/images/front/status-sprite.png);
background-position: 0px -160px;
margin: 0 10px 0 0;
}

行为没有改变。背景图像会更改为准备就绪，但不会变回。

编辑：使用csssprites.com生成的精灵更新代码。

4

1 回答 1

1

您的代码看起来不错，我建议验证您尝试显示的每个图像的路径是否存在。!important（虽然如果路径是正确的，你可以用标签覆盖样式表）

小提琴

虽然没关系，但没有必要url()用.background-imagedouble quotations

$('#status').css('background-image','url(/images/front/status-design.png)');
于 2013-04-11T09:02:03.920 回答