在 rails css 个文件中嵌入 erb

Question

我正在尝试设置 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;
}

非常感谢。

Answer 1

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

<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%;  
}

Answer 2

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

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

Answer 3

您可以像这样动态地向 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.

在 rails css 个文件中嵌入 erb

embedded erb in rails css files

css

ruby-on-rails

erb

background-image