可以根据bg颜色更改加载指示器颜色吗?

时间:2011-08-17 18:01:22

标签: jquery css colors

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

这可以通过jquery和css的某种组合来实现吗?

jquery判断背景是亮还是暗,css将某种掩码应用到加载指示器,将其颜色更改为计算值?

有这样的东西吗?

谢谢, 韦斯利

1 个答案:

答案 0 :(得分:2)

就在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在background-color上设置实际的#loadingColor

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

最重要的是,它适用于IE6 +!