jquery - 如何在 Ruby on Rails 中覆盖 Materialize CSS？

Question

我一直在互联网上浏览一些关于 Materialise in Rails 的帖子，但是这个领域似乎非常模糊。我目前正在使用 materialize-sass gem。

我没有找到很多有用的帖子，我决定在这里求助。

这是我拥有 pages/discover.html.erb 的页面的代码

<%= stylesheet_link_tag "https://fonts.googleapis.com/icon?family=Material+Icons" %>
  <div class="row">
    <div class="col s12 m5">
      <div class="card">
        <div class="card-image b">
          <img src="http://i.huffpost.com/gen/1456585/images/o-CRAIG-COBB-facebook.jpg">
          <span class="card-title">Cregg Cobb Is Back At It Again, But Only This Time He Has Guns</span>
        </div>
        <div class="card-content">
          <p>I am a very simple card. I am good at containing small bits of information.
          I am convenient because I require little markup to use effectively.</p>
        </div>
        <div class="card-action">
              <div class="chip">
                <img src="http://i.huffpost.com/gen/1456585/images/o-CRAIG-COBB-facebook.jpg" id="cobb">
                Like
              </div>
        </div>
      </div>
    </div>
  </div>

我想通过使用 <img> 使 filter: brightness(50%); 更暗

我该怎么做呢？我从哪里开始？

奖励:如果您知道我可以在哪里添加 Materializecss.com 在讨论组件和转换时提到的 jQuery 内容，将不胜感激!

Answer 1

因为它只是一个单一的覆盖，你可以添加一个新的 .css 文件到 Assets (或任何你存储静态东西的地方)，一个 !important 类:

img.darker {
  filter: brightness(50%) !important;
}

然后将它导入到模板的顶部:

<%= stylesheet_link_tag "/path/to/css.file" %>

并将类添加到您的图像标签中:

<img src="/my/img.png" class="darker">  

或者，您可以单独设置图像标签的样式:

<img src="/my/img.png" style="filter:brightness(50%)">