md-toolbar background-color: 透明不工作

Question

我已经为这个问题苦苦思索了一段时间....我不知道为什么即使我更改了 CSS，我的 md-toolbar 的背景仍然是白色的。

这里有我的项目示例：

http://abc.morado.xyz:32782/#/index

呈现所有视图的默认 HTML 页面如下所示：

<div layout="row" class="full-height transparent">
<!-- left sidebar -->

<!--<md-sidenav class="admin-sidebar-left md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="layout.sideMenuSize !== 'hidden' && $mdMedia('gt-sm')" ui-view="sidebarLeft" ng-class="{ 'admin-sidebar-collapsed': layout.sideMenuSize == 'icon' }" ng-mouseover="layoutController.activateHover()" ng-mouseleave="layoutController.removeHover()"></md-sidenav>-->

<!-- main content -->
<div id="admin-panel" layout="column" flex class="transparent">
    <!-- loading animation -->
    <tri-loader></tri-loader>

    <!-- top toolbar -->
    <md-toolbar class=" transparent" ng-if="layout.showToolbar" md-theme="{{triSkin.elements.toolbar}}" ui-view="toolbar" ng-class="[layout.toolbarSize,layout.toolbarClass]"></md-toolbar>

    <!-- scrollable content -->
    <md-content ng-class="layout.contentClass" flex tri-default-content ui-view="content"></md-content>

    <div ui-view="belowContent"></div>
</div>

<!-- right sidebar -->
<md-sidenav layout layout-fill class="md-sidenav-right md-whiteframe-z2" md-component-id="notifications" ui-view="sidebarRight"></md-sidenav>

并且 header 在我的配置文件中呈现：

.state('triangular.header', {
            abstract: true,
            views: {
                toolbar: {
                    templateProvider: function($templateCache, $http, triLayout) {
                        return $http.get(triLayout.layout.toolbarTemplateUrl, {cache: $templateCache })
                            .then(function(response) {
                                return response.data;
                            });
                    },
                    controllerProvider: function(triLayout) {
                        return triLayout.layout.toolbarController;
                    },
                    controllerAs: 'vm'
                },
                content: {
                    templateProvider: function($templateCache, $http, triLayout) {
                        return $http.get(triLayout.layout.contentTemplateUrl, {cache: $templateCache })
                            .then(function(response) {
                                return response.data;
                            });
                    }
                },
                belowContent: {
                    template: '<div ui-view="belowContent"></div>'
                }
            }
        })

我在网上看到了这些解决方案，但它们对我的情况不起作用...

https://github.com/angular/material/issues/4379

My own styles in angular material ui

如果你去我上面的 link 并尝试自己玩 CSS，你会发现在 md-toolbar 标签或 [=44] 上设置背景=] 在所述标签内，仅使背景为不透明的白色。

感谢您的帮助！

Answer 1

i have no idea when the background of my md-toolbar remains white even though i change the CSS

该元素的背景是透明的，正如您在CSS中指定的那样。

你看到的白色只是 body 元素的背景。

md-toolbar background-color: 透明不工作

md-toolbar background-color: transparent not working

angularjs

material-design

angular-material