Можно ли изменить цвет индикатора загрузки в зависимости от цвета bg?

Question

Допустим, у меня есть изображение индикатора загрузки, я хочу, чтобы оно хорошо отображалось на любом цвете фона.

Возможно ли это с помощью некоторой комбинации jquery и css?

j, чтобы определить, является ли фон светлым или темным, и 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, чтобы установить background-color на #loadingColor:

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

Лучше всего, он работает в IE6 +!