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

时间:2014-04-12 06:18:43

标签: jquery css

我正在尝试使用CSS Sprites更改图像,现在问题是display:none;显示:块;是从jQuery工作,但图像没有显示(我正在通过FireBug检查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;
}

1 个答案:

答案 0 :(得分:0)

试试这个。

.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.

});