如何覆盖在Ruby on Rails中实现CSS？

问题描述：

我一直在浏览一些关于Materialise在Rails上的帖子，但这个区域似乎很模糊。我目前正在使用materialize-sass宝石。

I've been looking through some posts on the internet about Materialize in Rails, however this area seems to be very fuzzy. I am currently using the materialize-sass gem.

我没有找到太多有用的帖子，我决定在这里度假。

I didn't find very many helpful posts, I decided to resort here.

这是我的一个页面的代码 pages / discover.html.erb

Here's my code for a page I have 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％）;

I want to make the <img> darker by using filter: brightness(50%);

我在哪里开始？

奖金：如果你知道我在哪里可以添加Materializecss.com在讨论组件和过渡时提到的jQuery的东西，将非常感谢！ / p>

Bonus: If you know where I can add the jQuery stuff that Materializecss.com mentions when discussing components and transitions, it would be greatly appreciated!

答

因为它只是一个覆盖，你可以添加一个新的.css文件到资产），具有！重要的类：

Since it's just a single override, you could add a new .css file to assets (or wherever you're storing static stuff), with a !important class:

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

然后将其导入模板顶部：

Then import it at the top of your template:

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

并将类添加到图像标记中：

And add the class to your image tag:

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

或者，您也可以单独设置图片标签的样式：

Alternatively you could just style the image tags individually:

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

如何覆盖在Ruby on Rails中实现CSS？

相关推荐