微調器reloader圖像似乎背後的覆蓋

我寫了一個代碼的東西來顯示與覆蓋微調reloader圖像。代碼工作正常，但問題是，圖像似乎在覆蓋後面，並沒有在真正的顏色也Loading...文本不與重裝圖像。微調器reloader圖像似乎背後的覆蓋

我的代碼如下

給出誰能告訴我一些解決方案，這

HTML

<div ng-app='myApp' ng-controller="Controller"> 
    <div id="darkLayer" class="loader ng-hide" ng-show="loader">Loading...</div> 
    <button ng-click="show()">Show Progress</button> 
</div>

腳本

var app = angular.module('myApp', []); 
app.controller('Controller', function ($scope) { 
    $scope.loader = false; 
    $scope.show = function() { 
     $scope.loader = true; 
    }; 
});

CSS

.loader { 
    background-color: #FAFAFA; 
    filter: alpha(opacity=50); 
    /* IE */ 
    opacity: 0.5; 
    /* Safari, Opera */ 
    -moz-opacity: 0.50; 
    /* FireFox */ 
    z-index: 1000; 
    height: 100%; 
    width: 110%; 
    background-repeat: no-repeat; 
    background-position: center; 
    background-image: url(http://i.stack.imgur.com/K8MeK.gif); 
    position: absolute; 
    top: 0px; 
    left: -13px; 
}

來源

2015-07-28 Alex Man

整個#darkLayer元件是在'不透明度：0.5'，包括加載器。嘗試將'background-color'設置爲'rgba（225,225,225,0.5）'並移除「不透明度」。 – BillyNate

@BillyNate這很酷.....但是怎麼樣加載文本 –

@AlexMan你知道我們在這裏工作，我們不爲你工作。嘗試並集中文本，如果您遇到特定問題，可以打開一個新問題。現在你甚至沒有嘗試過。 –

加載文本是存在的（左上角），你只是沒有把它定位到中心。

圖像不在疊加層後面，但它的不透明度設置爲50％，因此顏色發生變化。例如，這裏是without the overlay，gif仍然是透明的。

如果你想用GIF完全不透明（和文本也）來顯示，但保持透明覆蓋，你可以使用RGBA背景顏色，像這樣(live demo)：

background-color: rgba(250, 250, 250, 0.5);

來源

2015-07-28 09:09:08

感謝您的回覆....爲什麼加載文本不與微調器一起提供，加載文本當前顯示在左側角落 –

因爲文本不會自動居中，並且您沒有寫入任何CSS使其成爲中心。只需添加一些CSS來中心文本中的div。 –

我已經修改了小提琴你已經發布。請看一下。您必須在您的background color中有一個alpha頻道，而不是整個裝載機上的不透明度。

你的加載文本不在正確位置的原因是你沒有將它定位在你想要的特定位置！我已經在下面的小提琴中解決了這個問題。請看看它是如何完成的，並嘗試將其用於您的要求。

Working demo

來源

2015-07-28 09:09:53

感謝您的回覆....加載文本即將到來，但它似乎沒有響應，當你放大和縮小，你可以看到文本去其他方向 –

微調器reloader圖像似乎背後的覆蓋

回答

相關問題