Question

@media #{$only-small} {

    .beverages--element .inner:before{
        background-image: url(....);
        background-repeat: no-repeat;
    }
}

我有这段代码，它用于设计一个盒子，在饮料列表中显示饮料。

到目前为止一直很好，到目前为止我总是使用相同的图像来制作所有饮料。现在我需要扩展逻辑，现在每种饮料都有不同的形象。图像存储在云服务中，我将其链接到存储饮料的数据库中。如何将视图中的链接传递给css？

感谢

Answer 1

您有一个选项是在html中设置内联的背景图像。像这样：

<div style="background-image:(...)">mydiv</div>

Answer 2

虽然建议使用资产管道，但您可以针对较小的代码执行以下方法。您应该为您的css使用.css.erb扩展名，让运行时评估CSS中的代码。

@media #{$only-small} {

    .beverages--element .inner:before{
        background-image: <%= @beverage_url_image %>;
        background-repeat: no-repeat;
    }
}

其中@beverage_1_url_image应该包含您视图中的网址。

将url注入背景图像

2 个答案: