动态地分配背景图像SCSS / SASS(Dynamically assigning backgro

2019-08-08 02:10发布

我想要做的就是有一个表格,您可以上传图片,那么当您查看对象,画面锥体向上集中,垂直和水平在一个特定的div。 它的大小是未知的,等等。

除非有一种方法与IMAGE_TAG助手垂直居中的话,我希望能够使用的图像作为背景图像。 在我.css.scss文件,我希望能够像做

.image_div {
     background-image: image_url("#{@object.image}");
     background-position: center
}

即时通讯使用CarrierWave上传的照片,当我输出@ object.image它给我的计算机到图像上的路径(所以我不知道的话,那将被视为路径或URL生产)。 有任何想法吗?

Answer 1:

这是可能的SASS文件中使用再培训局,但它是一个非常,非常糟糕的主意,因为你的CSS会对每个请求被解析(和浏览器将无法进行缓存)。

我建议你干脆直接贴CSS中的一个片段查看页面上的风格标签。 这样,它就会与网页进行评估。 合理?


UPDATE(加入请求的示例)

添加到您的实际视图(如show.html.erb。):

<style media="screen">
  .image_div { background-image: url(<%= @object.image %>); }
</style>

您可以将background-position声明中的CSS文件,因为它不是动态的。 @object.image需要的实际路径返回图像,所以如果@object.image是一个Ruby对象,你需要访问任何属性存储路径( @object.image.path@object.image.url或任何适合您的代码库)。



文章来源: Dynamically assigning background image scss/sass