角材料透明工具栏

Question

我在一个Rails应用中使用Angular Material，希望一个工具栏可以放置在图片上方，并且使该工具栏透明，以便您可以看到其后面的图片。以下是迄今为止的代码：

<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？感谢您的帮助！

- Adam Weitzman

---

你找到任何解决方案了吗？我有类似的需求。 - Sohan Shirodkar

Answer 1

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

position: absolute
background-color:transparent

在工具栏上放置它以覆盖图像

- Adam Weitzman