索引項目に異なる背景イメージを与える方法

Question

私は、背景イメージを持つ複数の項目を表示する索引ビューを持っています。 urlは文字列product.imageです。ここにインデックスビューがあります。

<div class="products"> 

     <% @products.each do |product| %> 
     <style> 
      .product-image-index { 
      background-image: url('<%= product.image %>'); 
      background-size: cover; 
      background-position: center; 
      background-repeat: no-repeat; 
      } 
     </style> 
     <div class="product-con"> 
     <div class="product-image-index"> 
     </div> 
     <div class="product-text"> 
      <div class="title"><%= product.name %></div> 
      <div class="button-con"> 
      <span class="button"><%= link_to 'More Info', product, class: "buton" %></span> 
      </div> 
     </div> 
     </div> 
     <% end %> 
    </div> 

問題は、背景画像が同じイメージを持っている、と私は理解しますが、各項目がそれぞれの背景画像を示しているように、この問題を解決するものです。

Answer 1

あなたは可能性があり、次のいずれか

1. は、あなたのイメージのそれぞれに個別のCSSクラスを作成します。
2. は、あなたのHTML内で、background-image CSSをインラインで行いますstyle属性を使用して、ほとんどの状況では

---

<style> 
.product-image-index{ 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
} 
</style> 

<div class="products"> 
    <% @products.each do |product| %> 
    <div class="product-con"> 
     <div class="product-image-index" style="background-image: url('<%= @product.image %>');"></div> 
     <div class="product-text"> 
      <div class="title"><%= product.name %></div> 
      <div class="button-con"> 
       <span class="button"><%= link_to 'More Info', product, class: "buton" %></span> 
      </div> 
     </div> 
    </div> 
    <% end %> 
</div> 

は "悪い" です：HTMLコンテンツではなく、CSSが含まれている必要があります。しかし、私はこれらのような状況では、コンテンツのように動作するため、背景イメージの例外を作成します。

Answer 2

バックグラウンドイメージがループの最後のイメージになる可能性が高いCSSクラスを定義しています。の内側に、また

.product-image-index { 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
} 

あなたはそのクラスを再定義しているため、外部のスタイルシートへ、あるいは少なくともループのうちのスタイル定義を移動するN回：あなたは画像を設定する行を削除したいと思うでしょうループ。

そしてそうのような要素にインラインスタイルを追加します。

<div class="product-image-index" style="background-image: url('<%= product.image %>');">