html - 在手风琴的两侧显示图像

Question

我有如下手风琴。

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

Answer 1

多重背景？

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

演示

注意： 您需要background-color: #5CB3FF;在背景图像之后添加，因为速记background:将覆盖任何先前的声明。