如何添加內聯背景圖片？

Question

我想將一個靜態html頁面轉換成一個rails頁面。

我將如何轉換以下行

<div class="item active" style="background-image: url(../../foo.png);"> 

的圖像是assets/images文件夾內。

如果它是一個標準的形象，而不是一個背景圖片，我會用一個image_tag。

是更好地去除聯樣式爲CSS文件？如果是這樣，CSS將如何看？

.item .active { 
background-image: url(assets/foo.png); 
} 

Answer 1

最好將css代碼分開，以便將來可以重用它。 你可以這樣說...

.item.active { 
    background-image: image_url("foo.png"); 
} 

無需鍵入/assets/，不要忘了做rake assets:precompile

的優勢，內聯和外部使用CSS的缺點，click here

Answer 2

從這個

<div class="item active" style="background-image: url(../../foo.png);"> 

的CSS將

.item.active { 
    background-image: image_url("foo.png"); 
} 

這表示div有這兩個類。由於我們不瞭解您的具體情況，因此可能並不是您想要的。

這可能是因爲圖像只適用於.active類或只是.item類。

然後CSS將只包括單類的名稱，如

.active { 
    background-image: image_url("foo.png"); 
} 

這

.item .active { 
    background-image: image_url("foo.png"); 
} 

是當.active類是後裔.item類，