css - 在 ruby​​ on rails 中使用变量设置 css 样式

Question

我尝试这样做:final result .为此，我在第一张图片上放了另一张图片(这张:cover)。对于边框颜色，我创建了一个类“parallelogram”。

HTML 文件:

<%= image_tag(project.projectpicture.url(:slider), :class => "image") %>
<%= image_tag(("/assets/coverslider.png"), :class => "cover") %>
<div class="parallelogram" style="background: red;"></div>

CSS 文件:

.image
 {
    position: relative;
 }

 .cover
 {
    position: absolute;
    z-index: 1;
    top: 0;
    left:0;
 }

 .parallelogram
 {
    position: absolute;
    z-index: 1;
    top: 0;
    left:227px;
    opacity: 0.5;
    width:10px; 
    height:200px; 
    transform: skew(20deg); 
    -webkit-transform: skew(20deg);
  }

所有这些都有效。我不知道这是否是最佳解决方案，我对所有更好的解决方案都持开放态度。

现在我想改变平行四边形的颜色。为此，我尝试了:

<div class="parallelogram" style="background: #{project.color};"></div>

其中 project.color 是元素颜色。这是行不通的。 Rails 生成此 html 代码:

<img class="image" src="/system/projects/projectpictures/0..." alt="15"></img>
<img class="cover" src="/assets/coverslider.png" alt="Coverslider"></img>
<div class="parallelogram" style="background: #{project.color};"></div>

我不知道为什么#{project.color} 没有设置颜色并保持这样。

感谢您的帮助。如果您有更好的解决方案，我将很乐意学习。

Answer 1

I don't know why Rails doesn't do the same with <div>

因为 div标签属于 HTML不是Rails .你不能只给#{project.color}在HTML div .

解决方案

有一个div_for Rails 的标签, 尝试一下。

有关详细信息，请参阅此 API

或

尝试与 content_tag 一起使用