無法更改離子離子視圖欄的背景顏色？

我有以下離子html代碼。無法更改離子離子視圖欄的背景顏色？

<ion-nav-bar class="backarrow-bar" style="background-color:rgba(99,99,99,.5)"> 
    <ion-nav-back-button class="button-clear"> 
     <i class="ion-chevron-left" style="color:#ffffff;text-shadow: 2px 4px 3px rgba(0,0,0,0.3);"></i> 
    </ion-nav-back-button> 
</ion-nav-bar>

而下面的代碼被用來改變ion-nav-bar的背景色。但是，背景顏色無法更改。我甚至把背景顏色的內聯樣式用於測試，但它仍然不起作用？

.directive('headerShrink', function ($document) { 
    return { 
     restrict: 'A', 
     link: function ($scope, $element, $attr) { 
      var header = $document[0].body.querySelector('.backarrow-bar'); 
      var headerHeight = 44; 
      $element.bind('scroll', function (e) { 
       var scrollTop = e.target.scrollTop; 
       var alpha = Math.min(scrollTop/44, 1); 
       // Not working 
       header.style.backgroundColor = 'rgba(99,99,99,' + alpha + ')'; 
       // Not working either 
       // ionic.requestAnimationFrame(function() { 
       // header.style.backgroundColor = 'rgba(0,0,0,' + alpha + ')'; 
       // }); 
      }); 
     } 
    } 
})

來源

2016-06-12 ca9163d9

您不能通過javascript直接爲背景顏色指定alpha值。雖然你可以使用這個答案中提到的解決方案：https://stackoverflow.com/a/8179307/3878940

來源

2016-06-12 09:24:32

在SO回答中，它也使用'this.style.backgroundColor =「rgba（」+ [match [1]，match [2]，match [3 ]，a] .join（'，'）+「）」;'像我一樣分配backgroundColor？ – ca9163d9

你確定你的案例中的alpha值是一個浮點數<1嗎？你有沒有通過建議的更改進行檢查 –

是的，在鉻調試顯示其小於或等於1。 – ca9163d9

無法更改離子離子視圖欄的背景顏色？

回答

相關問題