嵌入式轨道的CSS文件

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

您可以使用内联样式是这样的：

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

Answer 2

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

<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 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。