html - 在不同的部分使用不同的图像

Question

我正在尝试弄清楚如何在我创建的这些部分上使用不同的图像。

您可以查看演示 here.

现在它在所有部分都有相同的图像。我试过使用 .order-header:nth-child(x) 然后更改 background: url() 但没有任何反应。

有什么方法可以在不在 html 代码中添加任何图像标签的情况下向这些部分添加不同的图像？

这是我的代码:

HTML:

   <div id="order-info">
      <div class="order-column">
        <span class="order-header">Fast and free delivery</span>
        <p class="order-content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
        <a class="order-links" href="international-shipping.html">See our Shipping Methods..</a>
      </div>

      <div class="order-column">
        <span class="order-header">Free returns within <br>14 days</span>
        <p class="order-content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
        <a class="order-links" href="returns-refunds.html">Read more about our <br>Return Policy..</a>
      </div>

      <div class="order-column">
        <span class="order-header">Secure <br>payment methods</span>
        <p class="order-content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s..</p>
        <a class="order-links" href="international-shipping.html">Read more about our <br>Payment Methods..</a>
      </div>

      <div class="order-column">
        <span class="order-header">Customer Feedback</span>
        <p class="order-content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
        <a class="order-links" href="international-shipping.html">Read more..</a>
      </div>

      <div class="order-column">
        <span class="order-header">Secure e-commerce</span>
        <p class="order-content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
        <a class="order-links" href="international-shipping.html">Read more about <br>secure e-commerce</a>
      </div>

    </div>

CSS

    #order-info {
      margin-top: 20px;
      margin-left: 10px;
      position: absolute;
      width: 1004px;
      height: 250px;
      background: #fff;
    }

    .order-column:nth-child(1) { float: left; }
    .order-column:nth-child(2) { float: left; padding-left: 20px; }
    .order-column:nth-child(3) { float: left; padding-left: 20px; }
    .order-column:nth-child(4) { float: left; padding-left: 20px; }
    .order-column:nth-child(5) { float: left; padding-left: 20px; }

    .order-header {
      padding: 45px 10px 0 10px;
      margin-top: 10px;
      font-weight: bold;
      display: inline-block;
      text-align: left;
      white-space: nowrap;
      position: relative;
      font-size: 13px;
      background: url("images/fast-and-free-delivery.png") no-repeat top center;
    }



    .order-content {
      color: #888;
      font-size: 12px;
      padding-top: 10px;
      line-height: 15px;
      padding-left: 10px;
      padding-right: 24px;
      width: 150px;
    }

    .order-links {
      font-size: 12px;
      text-decoration: none;
      color: #2793e6;
      line-height: 15px;
      float: left;
      display: inline;
      padding: 13px 10px;
    }

    .order-links:hover {
      text-decoration: underline;
    }

Answer 1

像这样使用 !important 覆盖 .order-header:nth-child(x) 类的默认背景。

.order-column:nth-child(1) .order-header{
    background: url("some url") !important;
}

.order-column:nth-child(2) .order-header{
  background: url("some other url") !important;
}