Material: Toolbar: transparent styling

[maxostarr]

I want to have the toolbar at the top of my page be transparent. I've tried adding

.transparent{
  background-color: transparent;
}

with this HTML

<div layout="column" layout-fill>
      <md-toolbar>
          <div class="md-toolbar-tools transparent">
              <span>Drake Developers Club</span>
              <!-- fill up the space between left and right area -->
              <span flex></span>
              <md-button>
                  Right Bar Button
              </md-button>
          </div>
      </md-toolbar>
      <md-content>
          <ng-view></ng-view>
      </md-content>
  </div>

But it seemed to do nothing. Any suggestions would be nice.

[Thiago-Medeiros]

...
<md-toolbar class="transparent">
<div class="md-toolbar-tools">
...

[d668]

@Thiago-Medeiros just to mention that your solution doesn't seem to work
would be nice to have a transparent option

[gimox]

this is not the best solution but you can force the css and it work.

.transparent{
  background-color: transparent !important;
}

[domface]

+1

[Ouwen]

This seems to work as well if you don't want to use important


.transparent-background {
background-color: rgba(0, 0, 0, 0);
}