css - 如何给索引项不同的背景图片

Question

我有一个索引 View ，显示多个带有背景图像的元素。 url 是一个字符串 product.image。这是我的索引 View 。

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

在大多数情况下使用 style 属性是“不好的”:HTML 应该包含内容，而不是 CSS。但在这种情况下，我对背景图片异常(exception)，因为它们表现得像内容。