當活動會改變背景

我在玩3張圖片。這讓我頭暈目眩。我想要的是當選項卡處於活動狀態時，它將更改背景圖像。當活動會改變背景

我現在有這樣的代碼在我的html：

div id="promo-nav-wrapper"> 
    <ul> 
     <li id="active"> 
      <a href="#" class="promo-call"></a> 
     </li> 
     <li> 
      <a href="#" class="promo-text"></a> 
     </li> 
    </ul> 
</div>

我的CSS

#promo-nav-wrapper { 
background: url("http://imageshack.us/photo/my-images/580/menubackground.png/"); 
background-repeat: repeat-x; 
width: 100%; 
height: 82px; 
} 
#promo-nav-wrapper ul { 
text-align: center; 
} 
#promo-nav-wrapper ul li { 
display: inline-block; 
margin-top: 20px; 
} 

#promo-nav-wrapper ul li a { 
height:53px; 
width:41px; 
display:block; 
text-decoration: none; 
background-repeat: no-repeat; 
text-shadow: none; 
} 
a.promo-call{ 
background-image:url("http://imageshack.us/photo/my-images/861/callicon2.png/"); 
z-index: 3; 
margin-right: 10px; 
} 
a.promo-text { 
background-image:url("http://imageshack.us/photo/my-images/807/texticon2.png/"); 
margin-left: 10px; 
margin-right: 10px; 
} 
/*this don't work*/ 
#promo-nav-wrapper li#active a { 
    background-image: url('http://imageshack.us/photo/my-images/694/selectediconbackground.png/') no-repeat!important; 
    height: 76px; 
    width: 64px; 
    /*background: blue;*/ 
}

我的問題是，當一個麗是積極的，我不能剪掉的圖像，它不顯示背景。 T_T。這樣說

#active a{ background-image: url('selected_icon_background.png'); 
.... 

}

來源

2012-03-13 Wondering Coder

那'#active一個{背景圖像：網址（ 'selected_icon_background.png'）;'是不是在你的實際代碼，這是隻是一個例子，對吧？只是想知道，因爲所有其他的在文件名前面都有'../ images /'。 – Rick 2012-03-13 06:49:37

它確實有用，看看這個小提琴http://jsfiddle.net/fBwEJ/。我用顏色代替了圖像。 – 2012-03-13 06:50:14

你可以在http://jsfiddle.net/推送你的代碼，以便更好地理解 – sandeep 2012-03-13 06:58:12

在你的樣式表的末尾試試這個

#promo-nav-wrapper #active a { background-image: url('selected_icon_background.png'); 
.... 

}

來源

2012-03-13 06:47:19

預防性的，但沒有必要查看OP的代碼。沒有其他CSS屬性衝突，所以'＃promo-nav-wrapper'可以省略 – 2012-03-13 06:51:47

http://jsfiddle.net/babulacute/kyYWU/6/

請這個人是我在本地PC

來源

2012-03-13 07:04:40 Brendon

沒有改變背景。請查看更多說明：http://jsfiddle.net/si_dean_ako/kyYWU/ – 2012-03-13 07:47:53

您是否在本地計算機中檢查過它？請保存圖像並在那裏檢查。 – Brendon 2012-03-13 10:30:30

加速到工作看完這個問題後我的理解是什麼 -

首先在小提琴：http://jsfiddle.net/si_dean_ako/kyYWU/圖片無法載入其次的CSS規則是錯上#promo-nav-wrapper li#active a

嘗試刪除

#promo-nav-wrapper li#active a { 
    background-image: url('http://imageshack.us/photo/my-images/694/selectediconbackground.png/') no-repeat!important; 
    height: 76px; 
    width: 64px; 
    /*background: blue;*/ 
}

，並添加這樣

#promo-nav-wrapper li#active { 
    background: url('http://imageshack.us/photo/my-images/694/selectediconbackground.png/') no-repeat!important; 
    height: 76px; 
    width: 64px; 
}

當我們想在當時寫多個值（速記屬性），我們必須使用css的background屬性，並在上面的提琴使用，並應用url('image path'), no-repeat, !important;。而背景圖像總是採取圖像的路徑。在這撥弄活動圖像的顯示<a href="#" class="promo-call"></a>背後http://jsfiddle.net/kyYWU/2/：

所以它更好地使用這樣的background: url('http://imageshack.us/photo/my-images/694/selectediconbackground.png/') no-repeat!important;

見更新小提琴。

見我的本地機器上生成的輸出：

enter image description here

來源

2012-03-13 08:11:33 w3uiguru

當活動會改變背景

回答

相關問題