角度のある素材透明なツールバー

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-インデックスではない場合、イメージの上に横たえますか？手伝ってくれてありがとう！

Answer 1

私は画像にツールバーの背景を作ってしまった...あなたはどんな解決策を見つけるか、画像