在 rails css 文件中嵌入 erb答案

【问题标题】：embedded erb in rails css files在 rails css 文件中嵌入 erb
【发布时间】：2016-08-01 09:30:52
【问题描述】：

我正在尝试设置 div 容器的样式并添加背景图像，即用户上传并存储在数据库 (adventure.image.url) 中的图像。我不确定如何在 css 文件中嵌入 erb 代码。

这是 index.html.erb 文件中的代码：

<div class="adventure_container">
      <% @adventures.each do |adventure|%>
        <div class="adventure">
          <%= link_to "#{adventure.title}", adventure_path(adventure.id), class: "adventure_title" %>
          <%= (image_tag adventure.image.url(:medium), class:'adv_img') %>
        </div>
      <% end %>
    </div>

这是我想将图像作为背景添加到的 CSS（或 SCSS）代码：

.adventure {
  display: flex;
  text-align: center;
  width: 300px;
  height: 200px;
  // background-color: #e9e8e8;
  background-image: url()
  margin: 1%;
  // border: 1px solid purple;
  border-radius: 15px;
}

非常感谢。

【问题讨论】：

标签： css ruby-on-rails background-image erb

【解决方案1】：

您可以像这样使用内联样式：

<%= link_to "#{adventure.title}", adventure_path(adventure.id), class: "adventure_title", :style => 'background-image: url('+adventure.image.url(:medium)+')' %>

【讨论】：

【解决方案2】：

您可以像这样动态地将背景图片添加到 div：

 <div class="adventure" style="background: url(<%= adventure.image.url(:medium) %>) no-repeat">
      <%= link_to "#{adventure.title}", adventure_path(adventure.id), class: "adventure_title" %>
 </div>

然后添加你的 CSS。

【讨论】：

【解决方案3】：

请将更改添加到以下代码中。

<div class="adventure_container">
  <% @adventures.each do |adventure|%>
    <div class="adventure">
      <%= link_to "#{adventure.title}", adventure_path(adventure.id), class: "adventure_title", style: "background-image: url(#{asset_path(adventure.image.url(:medium))});" %>
    </div>
  <% end %>
</div>

或者

<div class="adventure_container">
  <% @adventures.each do |adventure|%>
    <div class="adventure">
      <%= link_to "#{adventure.title}", adventure_path(adventure.id), class: "adventure_title", style: "background-image: url(#{asset_path(adventure.image.url(:medium))});" do %>
        <%= (image_tag adventure.image.url(:medium), class:'adv_img') %>
      <% end %>
    </div>
  <% end %>
</div>

// I am not a css guy. But you get the idea to adjust the background div accordingly.
.adventure {
  display: relative;
  // background-color: #e9e8e8;
  // border: 1px solid purple;
  border-radius: 15px;
}
.adv_img {
  position: absolute;
  text-align: center;
  width: 300px;
  height: 200px;
  margin: 1%;  
}

【讨论】：