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

Question

我想弄清楚如何在這些部分創建不同的圖像。

您現在就可以觀看演示here.

它的所有部分薩姆斯圖像。我試過使用.order-header:nth-child(x)，然後更改background: url()但沒有任何反應。

有沒有什麼辦法可以在不添加任何圖片標籤的情況下爲這些部分添加不同的圖片？

這裏是我的代碼：

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鏈接）