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

您正在定义一个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 %>');">

Answer 2

你可以：

为每个图片创建一个单独的CSS类。
在HTML中设置background-image CSS inline：

<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属性是＆＃34;坏＆＃34;：HTML应该包含内容，而不是CSS。但是我在这种情况下对背景图像做了例外，因为它们的行为就像内容一样。

如何为索引项目提供不同的背景图像

2 个答案: