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

Answer 2

对于每个div，当然需要在CSS中添加背景，如果你想改变它。就像你已经做的那样

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

Answer 3

为什么不在每个人中分别进行不同的课程？ order-header-1，order-header-2，order-header-3 .. 然后在你css你单独插入每个背景（img链接）

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

3 个答案: