如何添加内联背景图像？

Question

我正在尝试将静态html页面转换为rails页面。

我如何转换以下行

mailto:

图片位于<div class="item active" style="background-image: url(../../foo.png);"> 文件夹内。

如果它是标准图像而不是背景图像，我会使用assets/images。

将内联样式删除到css文件中会更好吗？如果是这样，css会怎么样？

image_tag

Answer 1

最好将css代码分开，以便将来可以重复使用它。 你可以这样做......

.item.active {
    background-image: image_url("foo.png");
 }

无需输入/assets/，也不必忘记rake assets:precompile

有关内联和外部使用css的优缺点，click here

Answer 2

从此

<div class="item active" style="background-image: url(../../foo.png);">

css将是

.item.active {
    background-image: image_url("foo.png");
 }

这表示div具有两个类。由于我们不了解您的具体情况，这可能不是您所追求的。

图片可能仅适用于.active课程或仅适用于.item课程。

然后CSS只包含一个单个类名，例如

.active {
    background-image: image_url("foo.png");
 }

此

.item .active {
    background-image: image_url("foo.png");
 }

适用于.active类是.item类后代的时间，