Угловой материал Прозрачная панель инструментов

Question

Я использую угловой материал в приложении rails, хочу, чтобы панель инструментов сидела поверх изображения и делала эту панель инструментов прозрачной, чтобы вы могли видеть изображение позади него. Вот код до сих пор:

<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> 

и что я вижу на странице прямо сейчас это просто образ ... вот это CSS:

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

как я получаю панель инструментов должна располагаться поверх изображения, если не с z-индексом? Спасибо за помощь!

Answer 1

я в конечном итоге делает изображение фона панели инструментов ... Вы можете также установить

position: absolute 
background-color:transparent 

на панели инструментов, чтобы поместить его на изображение