修改

Question

在我的 css 中，我有这个：

.inner-class {
  content: '';
}

.inner-class:before {
  background: url(http://www.fillmurray.com/500/500.jpg);
  content: '';
}

在我看来的 html.erb 中，我有这个：

<div class="outer-class">
  <div class="inner-class">
    ::before
  </div>
</div>

我想使用Rails更改:: before选择器的属性。通常情况下，我会做这样的事情：

<div class="outer-class">
  <div class="inner-class" style:"background: url(<% image_path %>)">
    ::before
  </div>
</div>

但是，这不会改变内部类的属性：before。我该怎么做？

Answer 1

你应该做的是添加一个额外的CSS类，并在那里更改:: before伪，然后有条件地将该类应用于父元素。

从您的ERB中删除::before文字。
像这样添加一个CSS类：

 .inner-class.do-something:before {
   background: url(http://www.fillmurray.com/300/300.jpg);
   content: '';

像你这样在ERB中加入条件：

 <div class="outer-class">
   <div class="inner-class" class="<% 'do-something' if my_condition %>">

   </div>
 </div>

修改

根据您的评论，您正在寻找更像这样的内容。 公平警告这可能是我能想象的在Rails中动态显示图像的最糟糕方式，此时我建议你只为你的头像提供一个单独的元素。

<div class='inner-class' data-image="<% ActiveSupport::Base64.encode64(open(article.user.avatar_url) { |io| io.read }) %>"></div>

你的CSS将是

 .inner-class:before { 
   content: url(attr(data-image)); 
   height: 40px; 
   width: 40px;  /* Whatever the expected height and width of the image are */`
 }

我可以在Rails视图中指定css :: before选择器样式吗？

1 个答案:

修改