Вам нужен другой подход.
Проверьте этот URL: http://www.eyecon.ro/colorpicker/.
Как вы можете видеть, когда вы перемещаете ползунок вверх и вниз, он меняет фон элемента выбора.
Но если вы проверите этот DIV с помощью Firebug, вы увидите, что он всегда использует это изображение: http://www.eyecon.ro/colorpicker/images/colorpicker_overlay.png
.. потому что родительский div использует фактический цвет:
<div class="colorpicker_color" style="background-color: rgb(255, 0, 0);"><div>
Попробуйте заменить это значение фона в firebug, например, установите его на green - вы увидите, что градиент все еще там, но этот градиент времени зеленый.
И это наш трюк. Создайте полупрозрачное изображение PNG для использования в качестве фона с шаблоном, показанным выше. Поместите его поверх однотонного фона , и при изменении цвета фона оно будет выглядеть так, как будто вы заменили фоновое изображение.
Так в теоретическом коде:
body { background:red; margin:0; padding:0; /* make sure overlay can stretch 100% in all directions*/ }
#background-overlay { background:url(path/to/image.png); }
<body>
<div id="background-overlay">
..content goes here
</div>
</body>
Недостатком этого подхода является то, что IE6 не поддерживает прозрачность для файлов PNG. Вы можете использовать какое-то png исправление прозрачности или полностью игнорировать этот эффект для пользователей IE6. (так как мы все равно не заботимся об их чувствах, верно?; -))
По моему скромному мнению, это самый правильный способ добиться желаемого эффекта, зная, что вы захотите изменить цвет фона позже.