角度材料透明工具栏

Question

我在轨道应用上使用角度材质，想要一个工具栏坐在图片的顶部，并使该工具栏清晰，以便您可以看到背后的图像。这是迄今为止代码：

<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-index，工具栏将位于图像的顶部？感谢帮助！

Answer 1

我最终使图像工具栏的背景...您还可以设置

position: absolute 
background-color:transparent 

工具栏上

，以把它放在一个