CSS图像精灵 - 更改显示设置图像不显示

Question

我试图更改图像使用CSS精灵，现在，问题是显示：无;显示：block;从jQuery的工作，但图像没有显示（我检查通过萤火其变化的HTML，但图像没有显示在所有）

$('#logobrandingactive').css({'display': 'block'}); 
$('#logobranding').css({'display': 'none'}); 
$('#logobrandingactive').css('opacity','1'); 

#logobranding { 
    opacity: 0.5; 
    display: none; 
    background-image: url("../images/servicesbranding.png"); 
    background-repeat: no-repeat; 
    position: absolute; 
    z-index: 15; 
    top:175px; 
    left: 50%; 
    margin-left: -81px; 
    width: 162px; 
    height: 162px; 
} 
#logobrandingactive { 
    opacity: 0.5; 
    display: none; 
    background-image: url("../images/moservicesbranding.png"); 
    background-repeat: no-repeat; 
    position: absolute; 
    z-index: 16; 
    top:175px; 
    left: 50%; 
    margin-left: -81px; 
    width: 162px; 
    height: 162px; 
} 

Answer 1

试试这个。

.loader { 
    width:100px; 
    height:100px; 
    position:absolute; 
    top:50%; 
    left:50%; 
    margin:-50px 0 0 -50px; 
    background:url(../path/to/image.jpg) no-repeat 0 0; 
    display:none; 
} 

隐藏和可见的jQuery

$(document).ready(function(){ 

$(".loader").show()// For visible; for hide use .hide() 

$(".loader").css({'background-image':'url(../path/to/image.jpg)'}); //Changing background image. 

});