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>

此方法实际上是可用的，因为链接也可以点击。

使用：之前分配动态背景图像

2 个答案: