可以根据背景颜色更改加载指示器颜色吗？

Question

假设我有一个加载指示器图像，我希望它在任何类型的背景颜色上都能很好地显示。

这是否可以通过 jquery 和 css 的某种组合来实现？

jquery 决定背景是亮还是暗，css 对加载指示器应用某种掩码以将其颜色更改为计算值？

外面有这样的吗？

谢谢，韦斯利

Answer 1

就在 CSS 一侧，您可以在加载图像的顶部堆叠一个 div，给它一个背景颜色，并使其透明。

HTML：

<div id="loading">
    <img src="loading.gif" alt="Loading..." width="X" height="Y" />
    <div id="loadingColor"></div>
</div>

CSS：

#loading { position:relative; width:Xpx; height:Ypx }
#loadingColor {
    position:absolute; top:0; left:0;
    width:100%; height:100%;
    opacity:.25; filter:alpha(opacity=25)
}

然后你可以使用 jQuery 在#loadingColor上设置实际的background-color ：

// This would be in your event listener,
// the "before-AJAX-is-sent" function, etc.
$('#loadingColor').css('background-color', '#whatev');

最重要的是，它适用于 IE6+！