md-toolbar Hintergrundfarbe: transparent funktioniert nicht

Question

Ich habe mir diesen Kopf eine Weile lang auf den Kopf geschlagen .... ich habe keine Ahnung, warum der Hintergrund meiner md-Werkzeugleiste weiß bleibt, obwohl ich das CSS ändere .

Ich habe eine Probe von meinem Projekt hier:

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

meine Standard-HTML-Seite, die alle Ansichten macht sieht wie folgt aus:

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

und der Header wird gerendert in meiner Konfigurationsdatei:

.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>' 
       } 
      } 
     }) 

Ich habe diese Lösungen online gesehen aber sie nicht in meinem Fall arbeiten ...

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

My own styles in angular material ui

Wenn Sie meinen Link oben gehen und versuchen, mit dem CSS spielen sich selbst, Sie werden feststellen, dass das Festlegen des Hintergrunds entweder auf dem md-toolbar-Tag oder dem div innerhalb dieses Tags den Hintergrund nur undurchsichtig weiß macht.

Vielen Dank für Ihre Hilfe!

Answer 1

Ich habe keine Ahnung, wenn der Hintergrund meiner md-Symbolleiste weiß bleibt, obwohl ich den CSS ändern

Der Hintergrund dieses Elements ist transparent, wie Sie in Ihrem CSS angegeben haben.

Das Weiß, das Sie sehen, ist einfach der Hintergrund des Körperelements.