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

我修改了你发布的小提琴。请看一下。您必须在alpha中使用background color频道，而不是整个装载机的不透明度。

您的加载程序文本位置不正确的原因是您没有将其定位在您想要的特定位置！我把它固定在下面的小提琴里。请查看它是如何完成的，并尝试将其用于您的要求。

Working demo

旋转器重新加载器图像似乎在叠加层后面

2 个答案: