ol bg图片应该在li bg图片之上

Question

我必须达到这样的目标：

我决定将ol与背景图片一起使用。

这是我的HTML和CSS：

// html

<ol>
    <li class="step1">
        <p>Text Text TextTextTextTextText   TextTextTextTextTextText            
            TextTextTextTextTextTextTextText  TextTextTextTextTextTextText </p>
    </li>
    <li class="step2">
        <p>Text Text TextTextTextTextText   TextTextTextTextTextText            
            TextTextTextTextTextTextTextText  TextTextTextTextTextTextText </p>
    </li>
    <li class="step3">
        <p>Text Text TextTextTextTextText   TextTextTextTextTextText            
            TextTextTextTextTextTextTextText  TextTextTextTextTextTextText </p>
    </li>
</ol>

// CSS

ol {
    list-style-position: inside;    
    list-style: none;
    font-size: 25px;
}

ol li {
    background-image: url(../images/poga_zala_fons.png), url(../images/Nr1.png);    
    background-position: -5px 0, -5px 0;
    background-repeat: no-repeat;
    padding-left: 7px;    
}

ol li.step1 p {
    background-color: #99cc33;        
    margin-left: 10px;
    z-index: -1;
}

ol li.step2 p {
    background-color: #ffff99;    
}

ol li.step3 p {
    background-color: #ffcc00;    
}

ol li p {
    font-size: 12px;
}

这是webste的链接

1）有很多问题，但是第一个问题是我无法使ol的背景图像超过段落背景的背景图像。

2）其次，我不确定使用ol / li的想法是最好的，也许还有其他一些不错的建议可以更好地实现形象思维？ 请给我一些线索，我不是在问确切的解决办法。

我是php程序员，但是刚开始创建CSS设计。

Answer 1

有很多可能的解决方案...如果要保留列表（由于“语义”），这里是一种：

http://jsfiddle.net/ZfhEN/1/

HTML：

<ul id="list">
<li class="step1">
<div class='bgr'>
<p class='txt'>
Look for the CITYrefund.eu logo when doing your shopping- this is the sign that particular shop participate in CITYrefund Tax Free service system*. Tell the shop assistant that you want to use CITYrefund Tax Free system and show your passport or national ID card. The shop assistant will give you the SPECIAL TYPE OF FORM. Fill in and sign the customer sections of the form in the presence of the shop assistant. *If the shop isn't yet registered in CITYrefund Tax Free service system, you can always use our SPECIAL TYPE OF FORM "B" in almost any shop in Riga.
</p>
</div>
</li>
<li class="step2">
<p>You must export the goods (that is, take them out of the EU with you) by the last day of the third month after the one in which you buy them. Show your goods, till receipts and SPECIAL TYPE OF FORMS to a Latvian customs officer or to customs in the last EU country you visit. You must get your SPECIAL TYPE OF FORM checked and stamped by a customs officer.</p>
</li>
<li class="step3">
<p>Get your VAT refund by CITYrefund.eu according to your choosed options. Register your SPECIAL TYPE OF FORMS and till receipts online and then mail the original copies to our office address: CITYrefund Latvia SIA, Pakalninu iela 4, Tīraine, Latvia.</p>
</li>
</ul>

CSS：

#list {
        list-style-type:none;
        width:680px;
    }
    .step1 {

        background-image:url(number.jpg);
        background-repeat:no-repeat;
        height:319px;
        /*width:?  */
        margin:0;
        padding:0;
        z-index:99;
        position:relative;


}
.step1 .bgr {
    position:absolute;
    top:0;
    padding:0;
    margin:0;
    left:166px;

    background-color:#99cc33;
    height:100%;
    /*width:?*/
}
.step1 .txt {
    padding:20px;
    margin-top:30px;


}

当然，您将需要调整大小，边距，填充，但是我希望您有所想法...