分配動態背景圖片提供：前

Question

我有一組博客文章被設計成這樣：

https://www.dropbox.com/s/x4ta8bjcua2rspz/Screenshot%202014-01-30%2020.01.20.png

我使用使人們有可能在目前的CSS/SCSS代碼：

#post-group:before { 
content: ""; 
background-image: url(@img-url); 
background-size: cover; 
background-position: 50% 50%; 
opacity: 0.2; 
top: 0; 
left: 0; 
bottom: 0; 
right: 0; 
position: absolute; 
z-index: -1; 
background-repeat: no-repeat; 
} 

我遇到的問題是，對於每篇文章，我想爲其提供一個獨特的背景圖像，以便用戶區分帖子。

不幸的是，因爲我沒有使用這樣的內聯CSS代碼：

<div style="background-image:url(@img-url)"></div> 

如何分配動態圖像，使用每個崗位：在此之前，是在static.css.scss文件？

Answer 1

我相信由於資產預編譯，你實際上不能動態地改變CSS中的背景。但是，您可以使用多個CSS樣式，並通過在DOM元素的class =「」屬性中使用標籤來動態地將它們用於ERB html文件。

Answer 2

我發現實際上具有兩個分離的div的溶液：

<div class="container"> 

<!-- Place background image with the same CSS function as above, leave background-image blank --> 
<div id="post-group" style="background-image: url(@img-url);"> 
</div> 

<!-- Provide Content --> 
<div class="section-post"> 
    <h3><%= link_to post.title, post %></h3> 
    <p class="summary"><em><%= truncate(post.summary, length: 110) %></em></p> 
    <p><%= link_to "read more", post, :class => "read-more" %></p> 
</div> 

</div> 

這種方法實際上是功能性，因爲鏈路可以是可點擊的，太。