css цвет фона на прозрачном изображении

Question

Я не знаю, как сделать цвет фона на изображении моего игрока синим.

Я пробовал:

CSS: background-color: transparent blue

Вот ссылка на страницу:

Homepage

Может кто-то инструктировать меня? Нужно ли использовать photoshop и сделать его синим?

UPDATE:

Я имел в виду только изображение, которое имеет значок игрока на нем.

Answer 1

Добавьте это в CSS:

.fancy_video img { 
    background-color: #33d; 
    -webkit-border-radius: 50%; 
     -moz-border-radius: 50%; 
      border-radius: 50%; 
} 

Для IE9 + только как предложено @showdev с прозрачным фоном:

.fancy_video img { 
    background-color: rgba(51,51,221,.5); 
    -webkit-border-radius: 50%; 
     -moz-border-radius: 50%; 
      border-radius: 50%; 
} 

Answer 2

Вы не можете иметь HTML элемент с как фоновое изображение и цвет фона (в CSS). Поэтому самый простой способ выполнить то, что вы собираетесь использовать, - это элемент, который находится непосредственно поверх изображения с синим оттенком, используя прозрачность или RGBA в CSS.

Например:

[http://jsfiddle.net/wyj3oj93/]