CSS过滤属性不起作用？

Question

我正在关注一篇关于显示＆＃34;正在加载＆＃34;正在执行Ajax调用时的图像。该示例具有内联的所有样式，但它可以工作，但我尝试将其转换为样式表中的CSS属性。除了过滤器属性外，一切都正常转换。

这是原始代码。过滤器位于主div中，它应该将页面的背景设置为透明50％，以引起对处理消息的注意。

<div id="divLoading" style="margin: 0px; padding: 0px; position: fixed; right: 0px;
    top: 0px; width: 100%; height: 100%; background-color: #666666; z-index: 30001;
    opacity: .8; filter: alpha(opacity=50); display:none">
    <p class="submit-progress" style="position: absolute; top: 30%; left: 45%; color: White;">
        Processing, please wait...<img src="~/images/ajax-loading.gif">
    </p>
</div>

这是我尝试将其转换为的CSS。

.ajax-loading-wrapper {
  position: fixed;
  margin: 0px;
  padding: 0px;
  right: 0px;
  top: 0px;
  width: 100%;
  height: 100px;
  background-color: #666;
  z-index: 30001;
  opacity: .8;
  filter: alpha(opacity=50) !important;
}

.ajax-loading-div {
  position: fixed;
  top: 50%;
  left: 50%;
  height: 7em;
  padding-top: 2.3em;

  width: 20em;
  margin-left: -10em;
  padding-left: 2.1em;
  background-color: black;
  color: white;
  border-radius: 5px;
}

.ajax-loading-text {
  position: absolute;
  top: 15%;
  left: 20%;
  color: white;
}

.ajax-loading-icon {
  position: absolute;
  top: 45%;
  left: 39%;
  color: white;
}


<div id="divLoading" class="ajax-loading-wrapper" style="filter: alpha(opacity=50) !important;">
    <div class="ajax-loading-div">
        <span class="ajax-loading-text">
            Processing, please wait...
        </span>
        <span class="ajax-loading-icon fa fa-spinner fa-pulse fa-3x fa-fw"></span>
    </div>
</div>

当我检查页面时，我看到过滤器属性被划掉了。我尝试添加！重要但是没有用。我也尝试将过滤器添加到divLoading样式，但这也不起作用。我在这些设置中看到的是页面顶部的一小部分（约25％）具有此背景颜色，但我需要在整个页面上使用它。

Answer 1

过滤器的工作原理并不完全（因为IE8）。它需要一个过滤函数列表，每个函数都给出一个值。您的示例的工作版本将是：

filter: opacity(0.5); // Opacity is 0 to 1, like the CSS property

进一步阅读：MDN Docs