Question

一些背景信息：我刚刚开始学习中间人来建立我的投资组合..我没有编程背景，所以忍受我:-)。

我有一个索引页面，其中列出了所有项目，如卡片，由json文件中的数据创建/填充。这是我用来为索引页面上的每个项目创建卡片的循环：

<div class="row">
  <% data.projects.projects.each do |project| %>
    <div class="col-md-12">
      <h2>
        <%= project.title %>
      </h2>
      <div>
        <%= link_to 'View project', project.path, relative: true %>
      </div>
    </div>
  <% end %>
</div>

这是我设置项目标题和网址的json文件：

{
    "projects": [
        {"title": "One",
         "path": "/one.html"
       },
        {"title":"Two",
         "path": "/two.html"
       },
       {"title":"Three",
        "path": "/three.html"
      }
    ]
}

到目前为止，非常好。

现在我想要做的是为每张卡设置（唯一的）背景图像，我不太清楚如何做到这一点。在我看来，我可以采取两种方法：

1。为每张卡创建CSS规则，并在json循环中设置类：

bg-img-1 { background-image: url("img1.jpg"); }

bg-img-2 { background-image: url("img2.jpg"); }

bg-img-3 { background-image: url("img3.jpg"); }

并在json文件中的每个项目中添加{ "bg-img": "bg-img-x" }。

然后在我的卡创建循环中添加＆＃39; bg-img＆＃39;到每张卡的班级。

2。在div上设置内联样式，并从json文件中注入img路径：

<div class="card" style="background: url(<%= data.project.img %>)"> </div>

然而，这些解决方案似乎都不优雅/最佳？随着解决方案＃1的改变变得乏味，因为我必须在几个地方进行更改，CSS＆amp; json文件。

解决方案＃2没有问题，但我不喜欢内联样式/将样式保存在不同的地方。

那么还有另一种方法吗？或者我必须选择其中一个并处理专业人士和专业人士。每个人的利弊？

谢谢！

Answer 1

解决方案＃2完全没问题，经常使用。内联样式的背景是一种标准做法

Middleman：动态背景图片？

1 个答案: