2012-09-29 85 views
0

我手風琴如下。在手風琴兩側展示圖像

<div class="question">Header 1</div> 
<div class="answer"> 
    text 1    
</div> 
<div class="question">Header 2</div> 
<div class="answer"> 
    text 2 

</div> 

CSS我是

#wrapper { 
    width: 100%; 
    font-family:verdana; 
    font-size:12px; 
} 

.question { 
    width: 100%; 
    float: left; 
    border: solid blue; 
    border-width: thin; 
    background-color: #5CB3FF; 
    font-size: 18px; 
    font-weight: bold; 
    padding-top:20px; 
    cursor: pointer; 
    background-image: url(images/down_arrow.jpg); 
    background-size: 5% 100%; 
    background-repeat : no-repeat; 
} 
.question:hover { 
    border: solid blue; 
    border-width: thin; 
    background-color: #736AFF; 
} 

.answer { 
    width: 100%; 
    float: left; 
    padding-top:10px; 
    padding-bottom:10px; 
} 

.active { 
    background-image: url(images/up_arrow.jpg); 
    background-size: 5% 100%; 
    background-repeat:no-repeat; 
} 

這給我的輸出如下

| image Header 1    | 
| image Header 2    | 

我要的是在右側添加相同的圖像也使輸出將

| image Header 1   image | 
| image Header 2   image | 
+0

你可以添加jquery/javascript代碼嗎? – Giona

+0

@GionaF:你爲什麼需要jquery/javascript代碼?這是CSS工作... –

回答

0

多背景?

.question { 
    background:url(images/up_arrow.jpg) top left; /* fallback */ 
    background:url(images/up_arrow.jpg) top left, url(images/up_arrow.jpg) top right; 
    background-size: 5% 100%; 
    background-repeat:no-repeat; 
    background-color: #5CB3FF; 
} 

Demo

注:您將需要經過背景圖片帶來background-color: #5CB3FF;因爲速記background:將覆蓋任何previsious聲明。

+0

謝謝,這是我正在尋找.... –

+0

:)不客氣。更多關於多個BG:http://www.css3.info/preview/multiple-backgrounds/和非常有趣:http://css-tricks.com/stacking-order-of-multiple-backgrounds/ – Giona