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             |

我想要的是在RIGHT侧添加SAME图像，以便输出

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

<强> Demo

注意： 您需要在背景图片后面加background-color: #5CB3FF; ，因为速记background:会覆盖任何预先声明。

手风琴两侧显示图像

1 个答案: