css 样式 - 背景颜色与 html 表格上的图像叠加

Question

我正在尝试动态地生成一个图像，覆盖一个表格，该图像是不透明度半填充的，因此它有点透明，但我什至无法让图像显示在单元格的颜色上...我首先尝试这样做，然后我将代码添加到不透明度中。

你能告诉我我做错了什么吗？

CSS 位于一个文件中，但这是针对发票的，我想覆盖一个显示已付款、退款、作废、待处理等的图像。

这是此发票的简短 CSS:

        .clearfix:after {
          content: "";
          display: table;
          clear: both;
        }

        a {
          color: #5D6975;
          text-decoration: underline;
        }

        .fbody {
          position: relative;
          width: 21cm;  
          height: 29.7cm; 
          margin: 0 auto; 
          color: #001028;
          background: #FFFFFF; 
          font-family: Arial, sans-serif; 
          font-size: 12px; 
          font-family: Arial;
          border-style: solid;
          border-width: 1px;
          border-color: #001028;
        }

        header {
          padding: 10px 0;
          margin-bottom: 30px;
        }

        div.logo {
          text-align: center;
        }

        //.logo img {
        //  width: 90px;
        //}

        .th1 {
          border-top: 1px solid  #5D6975;
          border-bottom: 1px solid  #5D6975;
          color: #5D6975;
          font-size: 2.4em;
          line-height: 1.4em;
          font-weight: normal;
          text-align: center;
          margin: 0 0 20px 0;
          background: url('/images/2.0/dimension.png');
        }

        #project {
          float: left;
          margin-left: 20px;
        }

        #project span {
          color: #5D6975;
          text-align: left;
          width: 52px;
          margin-left: 20px;
          display: inline-block;
          font-size: 1em;
        }

        #tcompany {
          margin-right: 20px;
          float: right;
          text-align: right;
        }

        #tcompany span {
          color: #5D6975;
          text-align: right;
          width: 52px;
          margin-right: 30px;
          display: inline-block;
          font-size: 1em;
        }

        #project div,
        #tcompany div {
          white-space: nowrap;        
        }

        .ttable {
          width: 100%;
          border-collapse: collapse;
          border-spacing: 0;
          margin-bottom: 20px;
        }

        .ttable tr:nth-child(2n-1) td {
          background: #F5F5F5;
          color: #000000;
          z-index: -1;
        }

        .ttable th,
        .ttable td {
          text-align: center;
          color: #000000;
        }

        .ttable th {
          padding: 5px 20px;
          color: #000000;
          border-bottom: 1px solid #C1CED9;
          white-space: nowrap;        
          font-weight: normal;
        }

        .ttable .service,
        .ttable .desc {
          text-align: left;
        }

        .ttable td {
          padding: 10px;
          text-align: right;
          color: #000000;
        }

        .ttable td.service,
        .ttable td.desc {
          vertical-align: top;
          color: #000000;
        }

        .ttable td.unit,
        .ttable td.qty,
        .ttable td.total {
          font-size: 1.2em;
          color: #000000;
        }

        .ttable td.grand {
          border-top: 1px solid #5D6975;
          color: #000000;
        }

        // Shipment section
        #toptable #billto {
            padding-left: 10px;
            margin-left: 10px;
            margin-top: 0px;
            padding-top: 0px;
          vertical-align: top;
          color: #000000;
        }

        #toptable #shipto {
            padding-left: 10px;
            margin-right: 10px;
            margin-left: 10px;
            padding-right: 10px;
            padding-top: 0px;
            margin-top: 0px;
          vertical-align: top;
          color: #000000;
        }

        #toptable .stable {
            text-align: center;
          padding: 0px;
          color: #000000;
        }

        #toptable .stable2 {
            text-align: center;
          padding: 0px;
          background: #EAFFEA;
          color: #000000;
        }

        #toptable .stableheader {
            font-weight: bold;
            border-bottom: 1px; solid #5D6975;
          background: #C0C0C0;
          color: #000000;
          text-align: center;
          font-size: 1.3em;
          height: 10px;
          padding-top: 5px;
          padding-bottom: 5px;
        }

        #notices .noticeheader {
            color: #5D6975;
          font-size: 1.5em;
          margin-left: 20px;
        }

        #notices .notice {
          color: #5D6975;
          font-size: 1.2em;
          margin-left: 20px;
        }

        footer {
          color: #5D6975;
          width: 100%;
          height: 30px;
          position: absolute;
          bottom: 0;
          border-top: 1px solid #C1CED9;
          padding: 8px 0;
          text-align: center;
        }

当然，路径需要域，但我把它去掉了，因为它位于登录页面后面。 (已编辑，我将其上传到论坛图片托管网站)

这是编程输出的 HTML。表标签内的样式是根据发票状态动态构建的。

  <table class="ttable" style="background: url('http://s10.postimg.org/d2nvpi7eh/refunded.gif'); z-index: 1; background-repeat: no-repeat; background-position: center;">
      <tr>
        <th class="service">Item Number</th>
        <th class="desc">Product Name</th>
        <th>Unit Price</th>
        <th>QTY</th>
        <th>TOTAL</th>
      </tr>
    <tbody>
        <tr><td class="service">PackageSKU</td> <td class="desc">Item Name / Short Desc</td> <td class="unit">$5.00</td> <td class="qty">1</td> <td class="total">$5.00</td></tr><tr><td class="service">&nbsp;</td> <td class="desc">&nbsp;</td> <td class="unit">&nbsp;</td> <td class="qty">&nbsp;</td> <td class="total">&nbsp;</td></tr><tr><td class="service">&nbsp;</td> <td class="desc">&nbsp;</td> <td class="unit">&nbsp;</td> <td class="qty">&nbsp;</td> <td class="total">&nbsp;</td></tr>
      <tr>
        <td colspan="4">SUBTOTAL</td>
        <td class="total">$5.00</td>
      </tr>
      <tr>
        <td colspan="4">Shipping and Handling</td>
        <td class="total">$1.95</td>
      </tr>
      <tr>
        <td colspan="4">TAX</td>
        <td class="total">$0.00</td>
      </tr>
      <tr>
        <td colspan="4" class="grand total">GRAND TOTAL</td>
        <td class="grand total">$6.95</td>
      </tr>
    </tbody>
  </table>

看，我尝试使用 z-index，但它不起作用。

每隔一行在 css 文件中都有背景颜色，并且它出现在图像上方。 没有背景颜色的线条，我可以看到图像，它只是不在颜色之上。

你能看出我需要如何修复它吗？

再次编辑，我添加了一个jsfiddle:http://jsfiddle.net/bizactuators/je26zszu/ 抱歉，另一个不是我的，必须注册。

Answer 1

另一个解决方案是对带有背景颜色的 td 使用负 z-index:

.ttable tr:nth-child(2n-1) td {
    background: #F5F5F5;
    color: #000000;
    position: relative;/*Add position relative*/
    z-index: -1;/*Add negative z-index*/
}

.clearfix:after {
    content:"";
    display: table;
    clear: both;
}
a {
    color: #5D6975;
    text-decoration: underline;
}
.fbody {
    position: relative;
    width: 21cm;
    height: 29.7cm;
    margin: 0 auto;
    color: #001028;
    background: #FFFFFF;
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-family: Arial;
    border-style: solid;
    border-width: 1px;
    border-color: #001028;
}
header {
    padding: 10px 0;
    margin-bottom: 30px;
}
div.logo {
    text-align: center;
}
//.logo img {
    // width: 90px;
    //
}
.th1 {
    border-top: 1px solid #5D6975;
    border-bottom: 1px solid #5D6975;
    color: #5D6975;
    font-size: 2.4em;
    line-height: 1.4em;
    font-weight: normal;
    text-align: center;
    margin: 0 0 20px 0;
    background: url('/images/2.0/dimension.png');
}
#project {
    float: left;
    margin-left: 20px;
}
#project span {
    color: #5D6975;
    text-align: left;
    width: 52px;
    margin-left: 20px;
    display: inline-block;
    font-size: 1em;
}
#tcompany {
    margin-right: 20px;
    float: right;
    text-align: right;
}
#tcompany span {
    color: #5D6975;
    text-align: right;
    width: 52px;
    margin-right: 30px;
    display: inline-block;
    font-size: 1em;
}
#project div, #tcompany div {
    white-space: nowrap;
}
.ttable {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin-bottom: 20px;
    
}

table.ttable{
    background: url('http://s10.postimg.org/d2nvpi7eh/refunded.gif');
    z-index: 1;
    background-repeat: no-repeat;
    background-position: center;
}

.ttable tr:nth-child(2n-1) td {
    background: #F5F5F5;
    color: #000000;
    position: relative;
    z-index: -1;
}
.ttable th, .ttable td {
    text-align: center;
    color: #000000;
}
.ttable th {
    padding: 5px 20px;
    color: #000000;
    border-bottom: 1px solid #C1CED9;
    white-space: nowrap;
    font-weight: normal;
}
.ttable .service, .ttable .desc {
    text-align: left;
}
.ttable td {
    padding: 10px;
    text-align: right;
    color: #000000;
}
.ttable td.service, .ttable td.desc {
    vertical-align: top;
    color: #000000;
}
.ttable td.unit, .ttable td.qty, .ttable td.total {
    font-size: 1.2em;
    color: #000000;
}
.ttable td.grand {
    border-top: 1px solid #5D6975;
    color: #000000;
}
// Shipment section #toptable #billto {
    padding-left: 10px;
    margin-left: 10px;
    margin-top: 0px;
    padding-top: 0px;
    vertical-align: top;
    color: #000000;
}
#toptable #shipto {
    padding-left: 10px;
    margin-right: 10px;
    margin-left: 10px;
    padding-right: 10px;
    padding-top: 0px;
    margin-top: 0px;
    vertical-align: top;
    color: #000000;
}
#toptable .stable {
    text-align: center;
    padding: 0px;
    color: #000000;
}
#toptable .stable2 {
    text-align: center;
    padding: 0px;
    background: #EAFFEA;
    color: #000000;
}
#toptable .stableheader {
    font-weight: bold;
    border-bottom: 1px;
    solid #5D6975;
    background: #C0C0C0;
    color: #000000;
    text-align: center;
    font-size: 1.3em;
    height: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
}
#notices .noticeheader {
    color: #5D6975;
    font-size: 1.5em;
    margin-left: 20px;
}
#notices .notice {
    color: #5D6975;
    font-size: 1.2em;
    margin-left: 20px;
}
footer {
    color: #5D6975;
    width: 100%;
    height: 30px;
    position: absolute;
    bottom: 0;
    border-top: 1px solid #C1CED9;
    padding: 8px 0;
    text-align: center;
}

table.ttable > tr > td{
    position: relative;
    z-index: -1;
}

<table class="ttable">
    <tr>
        <th class="service">Item Number</th>
        <th class="desc">Product Name</th>
        <th>Unit Price</th>
        <th>QTY</th>
        <th>TOTAL</th>
    </tr>
    <tbody>
        <tr>
            <td class="service">PackageSKU</td>
            <td class="desc">Item Name / Short Desc</td>
            <td class="unit">$5.00</td>
            <td class="qty">1</td>
            <td class="total">$5.00</td>
        </tr>
        <tr>
            <td class="service">&nbsp;</td>
            <td class="desc">&nbsp;</td>
            <td class="unit">&nbsp;</td>
            <td class="qty">&nbsp;</td>
            <td class="total">&nbsp;</td>
        </tr>
        <tr>
            <td class="service">&nbsp;</td>
            <td class="desc">&nbsp;</td>
            <td class="unit">&nbsp;</td>
            <td class="qty">&nbsp;</td>
            <td class="total">&nbsp;</td>
        </tr>
        <tr>
            <td colspan="4">SUBTOTAL</td>
            <td class="total">$5.00</td>
        </tr>
        <tr>
            <td colspan="4">Shipping and Handling</td>
            <td class="total">$1.95</td>
        </tr>
        <tr>
            <td colspan="4">TAX</td>
            <td class="total">$0.00</td>
        </tr>
        <tr>
            <td colspan="4" class="grand total">GRAND TOTAL</td>
            <td class="grand total">$6.95</td>
        </tr>
    </tbody>
</table>