將url注入背景圖片

@media #{$only-small} { 

    .beverages--element .inner:before{ 
     background-image: url(....); 
     background-repeat: no-repeat; 
    } 
}

我有這段代碼，它用於定義一個在飲料列表中顯示飲料的框。將url注入背景圖片

到目前爲止，迄今爲止，我一直對所有飲料都使用相同的圖像。現在我需要擴展邏輯，現在每種飲料都有不同的圖像。該圖像存儲在雲服務中，我已將其鏈接到存儲飲料的數據庫中。我怎麼能通過鏈接從視圖到CSS？

感謝

來源

2014-03-06 Luka

一種選擇，你必須是設置背景圖片內嵌在HTML。像這樣：

<div style="background-image:(...)">mydiv</div>

來源

2014-03-06 08:56:29 Ermir

問題是這是一個前置物品。我還沒有在自己的造型上工作過，我想使用已提供給我的樣式。 – Luka

儘管建議使用資產管道，但對於較小的代碼可以採用以下方法。您應該爲您的css使用.css.erb擴展，並讓運行時評估CSS中的代碼。

@media #{$only-small} { 

    .beverages--element .inner:before{ 
     background-image: <%= @beverage_url_image %>; 
     background-repeat: no-repeat; 
    } 
}

其中@beverage_1_url_image應該從您的視圖中獲得URL。

來源

2014-03-06 09:05:20 emaillenin

但在同一頁我有不同的飲料 – Luka

那麼你只能用@ Emir的解決方案 – emaillenin

將url注入背景圖片

回答

相關問題