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

spinner reloader image seems behind the overlay

本文关键字：覆盖 图像 新加载 加载 旋转      更新时间：2023-09-26

我已经写了一个代码的东西来显示一个旋转器重新加载图像与覆盖。代码工作得很好，但问题是图像似乎在覆盖层后面，不是真实的颜色，Loading...文本也没有随着重新加载图像而来。

我的代码如下

谁能告诉我解决这个问题的办法

演示工作

<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(https://i.stack.imgur.com/K8MeK.gif);
    position: absolute;
    top: 0px;
    left: -13px;
}

加载文本在那里(左上角)，你只是没有把它放在中间。

图片不在覆盖层的后面，但它的不透明度设置为50%，因此颜色的变化。例如，这里没有叠加，gif仍然是透明的。

如果你想用完全不透明度显示gif(和文本)，但保持透明的覆盖，你可以使用RGBA背景颜色，像这样(实时演示):

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

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

加载器文本不在正确位置的原因是您没有将其定位到您想要的特定位置!我已经修复了这个在下面的小提琴。请看看它是如何完成的，并尝试采用它来满足您的要求。

演示工作

相关文章：