CSS 过滤器属性不工作？

Question

我正在关注有关在执行 Ajax 调用时显示 "Loading" 图像的博客 post。该示例具有内联的所有样式并且它可以工作，但我正在尝试将其转换为在样式 sheet 中具有 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>

当我检查页面时，我发现过滤器属性被划掉了。我尝试添加 !Important 但这没有用。我还尝试只将过滤器添加到 divLoading 样式，但这也不起作用。我在这些设置中看到的是页面顶部的一小部分 (~25%) 具有这种背景颜色，但我需要在整个页面上使用它。

Answer 1

这不是过滤器的工作原理（自 IE8 起）。它需要一个过滤函数列表，每个函数都有一个值。您的示例的工作版本是：

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

进一步阅读：MDN Docs

CSS 过滤器属性不工作？

CSS filter property not working?

css

less

CSS 过滤器 属性 不工作？

CSS filter property not working?

css

less

CSS 过滤器属性不工作？