Angular Material Transparent Werkzeugleiste

Question

Ich verwende eckiges Material auf einer Schienen App, möchte eine Symbolleiste auf einem Bild sitzen und diese Symbolleiste deaktivieren, damit Sie das Bild dahinter sehen können. Hier ist der Code so weit:

<div layout="column" layout-fill> 
<div layout="row"> 
    <img src="http://www.outsideonline.com/sites/default/files/styles/full-page/public/yosemite-smart-black-bear_h.jpg?itok=kKS8ILd9"> 
    <md-toolbar id="toolbar" class="transparent"> 
     <div class="md-toolbar-tools"> 
      <span>Turbo Mortgages</span> 
      <!-- fill up the space between left and right area --> 
      <span flex></span> 
      <md-button ui-sref="app.register" 
         aria-label="Toggle Mobile Navigation"> 
       About 
      </md-button> 
      <md-button ui-sref="app.join" 
         aria-label="Toggle Mobile Navigation"> 
       Join 
      </md-button> 
      <md-button ui-sref="app.login" 
         aria-label="Toggle Mobile Navigation"> 
       Login 
      </md-button> 
     </div> 
    </md-toolbar> 
</div> 
<md-content> 
    <ng-view></ng-view> 
</md-content> 

und was ich auf der Seite im Moment ist nur das Bild ... hier ist die CSS:

#toolbar { 
    position:relative; 
    z-index:1000; 
} 

Wie komme ich die Werkzeugleiste, die über dem Bild liegt, wenn nicht mit dem Z-Index? danke für die Hilfe!

Answer 1

Ich beendete den Hintergrund der Symbolleiste, um das Bild nach oben zu machen ... Sie können auch die es auf das Bild

position: absolute 
background-color:transparent 

auf der Werkzeugleiste

zu platzieren