Как изменить оттенок фонового изображения с помощью CSS3?

Question

Можно ли изменить цвет или оттенок фонового изображения при наведении / фокусировке, используя чистую CSS

См. Пример здесь http://jsfiddle.net/jitendravyas/HdDRA/

В приведенном выше примере на изображении есть белая стрелка. Я хочу изменить цвет белой стрелки (не другого фонового изображения) на что-то другое при наведении и фокусировке.

Я не могу использовать встроенные изображения в моем случае.

Edit:

Я выгляжу почти так же, как это http://jsbin.com/icemiy, но для фоновых изображений.

И я также хочу изменить цвет с затуханием, поэтому я не могу сделать с несколькими изображениями

Answer 1

Быстрое и грязное исправление состояло бы в дублировании изображения стрелки в цвете, на котором вы хотите, чтобы он был наведен.Затем замените фоновое изображение на это в коде.

body 
{
    background: 
        url(http://www.kapellohair.com/images/white-arrow.png) no-repeat,
        url(http://www.tnpsc.com/downloads/NaturesScenery.jpg) no-repeat;
    background-position:
        center 50px, 
        center top;
}

body:hover
{
    background: 
        url(http://www.example.com/images/arrow-with-desired-color.png) no-repeat,
        url(http://www.tnpsc.com/downloads/NaturesScenery.jpg) no-repeat;
    background-position:
        center 50px, 
        center top;
}

ps: ссылка не существует.Это только для иллюстрации

Answer 2

Просто подумать здесь

Полагаю, вы могли бы поместить прозрачный цветной div на верх изображения с непрозрачностью 0, а затем увеличить его непрозрачность, скажем, до 10% при наведении.Хотя вы будете несколько ограничены в том, что вы можете сделать, это будет выглядеть странно, например, если вы сделаете это с изображением с нерегулярным контуром, и у вас будет только ограниченный контроль над тонированием (я думаю, чтобыть эквивалентом полупрозрачного слоя в Photoshop, чтобы вы не могли делать ничего, для чего вам потребуются другие приемы, такие как умножение или экран).

Answer 3

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

Альтернативой может быть использование шрифта для визуализации стрелки, а затем для изменения ее цвета (который также является анимируемым).

Кроме того, вы можете положиться на Javascript, чтобы сделать некоторые манипуляции с цветом на изображении. См. этот ответ