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

Here is link to 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;


}

当然，您将不得不调整大小、边距、填充，但我希望您明白...