如何添加内联背景图片？

问题描述：

我想将一个静态html页面转换成一个rails页面。如何添加内联背景图片？

我将如何转换以下行

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

的图像是assets/images文件夹内。

如果它是一个标准的形象，而不是一个背景图片，我会用一个image_tag。

是更好地去除联样式为CSS文件？如果是这样，CSS将如何看？

.item .active { 
background-image: url(assets/foo.png); 
}

完全正确...写入外部CSS文件的样式由于许多原因被认为是良好的做法。 – odedta

是的。您遇到的任何问题？ –

要么使用'.item'或'.active'类来应用css。 –

答

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

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

无需键入/assets/，不要忘了做rake assets:precompile

的优势，内联和外部使用CSS的缺点，click here

很酷...全部完成。 –

@MAC即使做复制粘贴，我们也必须用我们的大脑。 :) –

答

从这个

<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类，

你的回答很好解释。 :) –