logo标签列表

能否根据背景颜色更改加载指示器的颜色？

jquerycsscolors
3

假设我有一个加载指示器图片，我希望它能在任何背景颜色下显示得很好。

通过jquery和css的某种组合方式可以实现吗？

使用jquery来判断背景是浅色还是深色，然后使用css应用某种遮罩到加载指示器上以改变其颜色为计算出的值？

是否有类似的解决方案存在？

谢谢， Wesley

1个回答
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在#loadingColor上设置实际的background-color:

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

最棒的是，它可以在IE6及以上版本中使用！
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接