中间人：动态背景图？

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>

这是我设置项目标题和 url:

的 json 文件

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

到目前为止，还不错。

现在我要做的是为每张卡片设置一个（唯一的）背景图片，但我不太确定该怎么做。在我看来，我可以采取两种方法：

1.为每张卡片创建 CSS 规则并在 json:

循环中设置 class

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

然后在我的卡片创建循环中将 'bg-img' 添加到每张卡片的 class。

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

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

但是，这些解决方案似乎都不优雅/最佳？使用解决方案 #1 进行更改变得乏味，因为我必须在多个地方进行更改，CSS & json 文件。

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

那么还有其他方法吗？还是我必须选择其中一个并处理每个的优缺点？

谢谢！

Answer 1

解决方案 #2 完全没问题并且经常使用。背景的内联样式是标准做法

中间人：动态背景图？

Middleman: dynamic background image?

css

ruby

json

ruby-on-rails

middleman