微调器重新加载图像似乎在叠加层后面

Question

我写了一段代码来显示带有叠加层的旋转器重新加载器图像。代码工作正常，但问题是图像似乎在叠加层后面并且不是真实颜色，而且 Loading... 文本没有随重新加载图像一起出现。

我的代码如下

谁能告诉我一些解决方案

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

Answer 1

加载文本在那里（左上角），只是您没有将其置于中心位置。

图像不在叠加层后面，但它的不透明度设置为 50%，因此颜色发生了变化。比如这里是without the overlay，gif还是透明的

如果您希望 gif 以完全不透明的方式显示（以及文本）但保持透明覆盖，您可以使用 RGBA 背景颜色，例如 (live demo):

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

Answer 2

我已经修改了您发布的 fiddle。请看一下。你必须在你的 background color 中有一个 alpha 通道，而不是整个加载器上的不透明度。

加载器文本位置不正确的原因是您没有将其定位到您想要的特定位置！我在下面 fiddle 中修复了这个问题。请查看它是如何完成的，并尝试根据您的要求采用它。

Working demo

微调器重新加载图像似乎在叠加层后面

spinner reloader image seems behind the overlay

html

javascript

css

loader

angularjs